Membuat Popular Post dengan Efek Grid Thumbnail
Popular Post adalah gadget/widget yang cukup lama ada di blogpsot atau blogger.com. Widget Popular Post ini menampilkan postingan yang banyak dilihat (view). Ukuran popularitas sebuah post ditentukan oleh seberapa sering post itu dibaca oleh pengunjung blog. Kita bisa memodifikasi tampilan Popular Post menjadi efek grid thumbnail, yaitu thumbnail dari post tersebut dibuat berjejer, seperti galeri gambar/foto.
Adanya widget ini bisa memberikan menu pada pembaca atau blogger, untuk melihat post-post yang populer di blognya. Dari segi fungsi atau manfaat, widget ini sangat bermanfaat, apalagi ada pilihan-pilihan untuk mengatur widgetnya. Tidak hanya judulnya saja, kita bisa menampilkan Thumbnail gambar dan cuplikan isi post. Selain itu, bisa juga diatur Popular Post itu berdasarkan paling banyak dikunjungi setiap saat, 30 hari atau 7 hari terakhir.
Cara menambahkan widget Popular Post adalah saat di dasbor pilih Tata Letak lalu tambahkan Tambah Gadget. Pilih Entri Populer (Menampilkan daftar pos yang paling populer dari blog Anda). Atur Popolar Post (Entri Populer) menampilkan thumbnail gambar.
Cara Membuat Popular Post dengan Efek Grid Thumbnail
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu taruh kode berikut di atasnya
5. Angka 75 adalah ukuran thumbnail yang ingin ditampilkan, dan 79 untuk memberikan sedikit jarak. Kamu dapat mengubahnya sesuai dengan lebar sidebar blogmu, dan jika ukuran 75 diubah maka 79 juga harus diubah, berarti selisihnya 4.
6. Kemudian cari kode yang seperti ini:
7. Ganti kode di atas (no. 6) dengan kode berikut ini;
8. Simpan template jika sudah selesai
Adanya widget ini bisa memberikan menu pada pembaca atau blogger, untuk melihat post-post yang populer di blognya. Dari segi fungsi atau manfaat, widget ini sangat bermanfaat, apalagi ada pilihan-pilihan untuk mengatur widgetnya. Tidak hanya judulnya saja, kita bisa menampilkan Thumbnail gambar dan cuplikan isi post. Selain itu, bisa juga diatur Popular Post itu berdasarkan paling banyak dikunjungi setiap saat, 30 hari atau 7 hari terakhir.
Cara menambahkan widget Popular Post adalah saat di dasbor pilih Tata Letak lalu tambahkan Tambah Gadget. Pilih Entri Populer (Menampilkan daftar pos yang paling populer dari blog Anda). Atur Popolar Post (Entri Populer) menampilkan thumbnail gambar.
Cara Membuat Popular Post dengan Efek Grid Thumbnail
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu taruh kode berikut di atasnya
.sidebar .popular-posts ul{margin:0;padding:0px;}
.PopularPosts .widget-content ul li {padding: .1em 0;}
.sidebar .popular-posts ul li {margin: 0 0px;background:none;float:left;width:79px;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: 75px;height: 75px; background:#333; border:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc;padding:0px;}
.PopularPosts .item-thumbnail {margin: 0;}
.sidebar .PopularPosts .item-title {display: none;}
.PopularPosts .widget-content ul li {padding: .1em 0;}
.sidebar .popular-posts ul li {margin: 0 0px;background:none;float:left;width:79px;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: 75px;height: 75px; background:#333; border:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc;padding:0px;}
.PopularPosts .item-thumbnail {margin: 0;}
.sidebar .PopularPosts .item-title {display: none;}
5. Angka 75 adalah ukuran thumbnail yang ingin ditampilkan, dan 79 untuk memberikan sedikit jarak. Kamu dapat mengubahnya sesuai dengan lebar sidebar blogmu, dan jika ukuran 75 diubah maka 79 juga harus diubah, berarti selisihnya 4.
6. Kemudian cari kode yang seperti ini:
<!-- (3) Show only thumbnails -->
<div class="item-thumbnail-only">
<div class="item-thumbnail">
.......................
.......................
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class="item-thumbnail-only">
<div class="item-thumbnail">
.......................
.......................
<b:else/>
<!-- (4) Show snippets and thumbnails -->
7. Ganti kode di atas (no. 6) dengan kode berikut ini;
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png'/>
</b:if>
</a>
</div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-thumbnail-only'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png'/>
</b:if>
</a>
</div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
8. Simpan template jika sudah selesai
keren mas
BalasHapusthx to infonya..
BalasHapusmakasih banyak infonya Bro...!!
BalasHapusnice post,, :D
BalasHapusijin nyoba Gan yaa,,heeeeee
BalasHapusTerima kasih atas infonya gan. Mau saya terapkan ah tipnya. Salam sukses
BalasHapusterima kasih sudah berbagi ilmunya,,
BalasHapusnice post gan,,terima kasih untuk informasinya
BalasHapusboleh juga nih infonya,,saya coba gan,,terima kasih sudah berbagi infonya
BalasHapusbagus gan. makacc yee ..
BalasHapusoke banget gan......infonya...siiip..
BalasHapusBagus gan..
BalasHapusijin nyoba...
Ada contoh yang sudah jadi belum bang kur
BalasHapuswah di caoba ah
BalasHapuskayaknya gampang tuh
thanks broo?
BalasHapusmakasih infonya................
BalasHapusijin nyimak dulu Bro :D
BalasHapusartikel yang sngt bermanfaat
BalasHapusmantap Bro,, thanks yaaaa
BalasHapuswah, bisa di coba nih..
BalasHapusbagus gan thanks nice inpo
BalasHapusjngan lupa ada hal menarik dan aneh terupdate
http://webunic.blogspot.com/
thanks sob :)
BalasHapushttp://herbalarjawinangun.blogspot.com/
kelebihan dari blogspot semuanya bisa di setting sedemikian rupa termasuk widget2nya sesuai dengan keinginan kita
BalasHapusterima kasih tutorialnya
sip dah
BalasHapusoh iya
nih ada berita dan info menarik unik dan aneh terupdate dan di jamin 100% beda , asli original.
http://webunic.blogspot.com/
:D Keren info nya mas...
BalasHapusTerima kasih sudah sharing
berguna banget
BalasHapusoh iya
nih ada berita dan info menarik unik dan aneh terupdate dan di jamin 100% beda , asli original.
http://webunic.blogspot.com/
Komentar ini telah dihapus oleh pengarang.
BalasHapuskeren dah ilmunya hhe __ oiy gan ane dah follow blognya bila berkenan folback ya __
BalasHapushttp://katanya-ska.blogspot.com/
makasih banyak udh sharing
BalasHapusijin nyimak dulu kawan :D
BalasHapuskunjungan siang, sembari baca" artikelnya Mas..hhee
BalasHapusnah,, mantep juga nih.. nyoba deh..terimakasih yaaa
BalasHapusmakasih info nyaa... ditunggu kunjungan balikny
BalasHapuswebunic.blogspot.com
BalasHapusthx infonya..
BalasHapusmantaap gan..
BalasHapusthx to infonya..
BalasHapusmakasih atas informasinya..
BalasHapusterima kasih bos,.. di tunggu efek post populer yang lainnya..
BalasHapussip mas, siap laksanakan
BalasHapusWah keren nih popular post nya! THANKS :)
BalasHapusKeren bg
BalasHapusseperti yang saya harapkan
makasih bang infonya,,ijin copas....
BalasHapussukses buat artikel'y gan...
BalasHapussukses buat artikelnya mas salam blogger :)
BalasHapusThanks infonya, sudah saya terapakan pada blog saya dan hasilnya oke. :D
BalasHapuskalau di wordpress bisa ga gan?
BalasHapuspenting buat blog saya yang terbaru nih mbak
BalasHapusmakasih sudah sharing ilmunya,segera dipraktekkan
BalasHapusSEGERA MELUNCUR KE TKP
BalasHapuswawww keren gan
BalasHapusThanks gan, work
BalasHapustapi kok gambarnya dibuat landscape gak bisa ya
ohh ini namanya cara di grid yah, aku baru tau kak, hihi. makasih ya
BalasHapuscaranya gimana kalo untuk pemula?? saya masih belum ngerti...
BalasHapuswaduh ane coba masih gagal, knp ya?
BalasHapusterimakasih informasinya bermanfaat. langsung dipraktekin dan bisa dong
BalasHapusMakasih gan..
BalasHapuspostingan agan sangat membantu.
Udah bosen ngliat popular post bawaan bloger yang sangat sederhana.
Langsung Praktek jos gandos :) invite juga http://caknamedia.blogspot.com/
BalasHapus