Cara membuat Popular Post dengan Thumbnail Bentuk Grid

Pada tutorial ini admin menggunakan sidebar dengan lebar 300px. Jika anda memiliki lebar sidebar yang berbeda, mungkin anda harus melakukan sedikit perubahan agar lebih serasi dengan template.

Berikut ini adalah Langkah-langkah untuk Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery:

1. Seperti biasa masuk kedashboard => Design => Edit Html.

2. Cari kode ]]</b:skin>

3. Letakkan kode CSS dibawah ini di atasnya.

.sidebar .popular-posts ul li img:hover, .cross2 ul li img:hover {-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:1;border-radius: 50%;}

.sidebar .popular-posts ul{margin:0;padding:2px;}

.PopularPosts .widget-content ul li {padding: .1em 0;}

.sidebar .popular-posts ul li {margin: 0 3px;background:none;float:left;width:91px;list-style-type:none;border:none;line-height:0px;}

.sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 85px;height: 85px;opacity: 0.7;opacity:0.7;filter:alpha(opacity=70);background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;padding:4px;}

.PopularPosts .item-thumbnail {margin: 0;}

.sidebar .PopularPosts .item-title {display: none;}

4. Save template.

5. Kembali ke Dashboard => Design => Add Element.

6. Pasang popular post bawaan blogger dibagian sidebar. Bagi yang telah memasangnya, settingan yang "harus" dilakukan adalah seperti gambar dibawah ini.

1. Hilangkan ceklist pada snippet.

2. Atur jumlah postingan tampil menjadi 3, 6 atau 9.

Artikel Terkait:

blogging

• cara membuat efek zoom atau membesar pada gambar di blog
• Daftar Kode Warna Web
• Cara Mengubah Domain Blogspot ke Domain .com
• Membuat template sendiri dengan 9 Generator Template Blog
• Cara Menghilangkan Widget Attribution Blogger
• Cara Kompress Template Blogger Agar Ringan
• Search Box Simpel dan Keren Untuk Blogspot
• Compress CSS, JavaScript &amp; HTML Membuat Blog Menjadi Ringan
• Blog yang Disukai dan Dibenci Oleh Pengunjung

Cara membuat Popular Post dengan Thumbnail Bentuk Grid

tutorial

• Memperbaiki Windows 7 Black Screen
• Cara Mengatur Timer Shutdown Pada Laptop/PC
• Cara Mengaktifkan Hibernate Pada Windows 8
• Fungsi Tombol Keyboard Pada Corel Draw
• Save As PDF pada MS Word 2007
• Mengganti tulisan"Welcome" di Windows 7/Vista
• Mengambil alih hak akses file di Windows Vista/7
• Cara Membuat Tulisan Saat Booting di Windows
• Tutorial dasar CorelDraw X5