Lompat ke konten Lompat ke sidebar Lompat ke footer

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

.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;}

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 -->

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 -->

8. Simpan template jika sudah selesai

58 komentar untuk "Membuat Popular Post dengan Efek Grid Thumbnail"

  1. Terima kasih atas infonya gan. Mau saya terapkan ah tipnya. Salam sukses

    BalasHapus
  2. terima kasih sudah berbagi ilmunya,,

    BalasHapus
  3. nice post gan,,terima kasih untuk informasinya

    BalasHapus
  4. boleh juga nih infonya,,saya coba gan,,terima kasih sudah berbagi infonya

    BalasHapus
  5. oke banget gan......infonya...siiip..

    BalasHapus
  6. Ada contoh yang sudah jadi belum bang kur

    BalasHapus
  7. wah di caoba ah

    kayaknya gampang tuh

    BalasHapus
  8. bagus gan thanks nice inpo

    jngan lupa ada hal menarik dan aneh terupdate
    http://webunic.blogspot.com/

    BalasHapus
  9. thanks sob :)
    http://herbalarjawinangun.blogspot.com/

    BalasHapus
  10. kelebihan dari blogspot semuanya bisa di setting sedemikian rupa termasuk widget2nya sesuai dengan keinginan kita
    terima kasih tutorialnya

    BalasHapus
  11. sip dah

    oh iya
    nih ada berita dan info menarik unik dan aneh terupdate dan di jamin 100% beda , asli original.
    http://webunic.blogspot.com/

    BalasHapus
  12. :D Keren info nya mas...

    Terima kasih sudah sharing

    BalasHapus
  13. berguna banget

    oh iya
    nih ada berita dan info menarik unik dan aneh terupdate dan di jamin 100% beda , asli original.
    http://webunic.blogspot.com/

    BalasHapus
  14. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  15. keren dah ilmunya hhe __ oiy gan ane dah follow blognya bila berkenan folback ya __
    http://katanya-ska.blogspot.com/

    BalasHapus
  16. kunjungan siang, sembari baca" artikelnya Mas..hhee

    BalasHapus
  17. nah,, mantep juga nih.. nyoba deh..terimakasih yaaa

    BalasHapus
  18. makasih info nyaa... ditunggu kunjungan balikny

    BalasHapus
  19. terima kasih bos,.. di tunggu efek post populer yang lainnya..

    BalasHapus
  20. Wah keren nih popular post nya! THANKS :)

    BalasHapus
  21. Keren bg
    seperti yang saya harapkan

    BalasHapus
  22. makasih bang infonya,,ijin copas....

    BalasHapus
  23. sukses buat artikelnya mas salam blogger :)

    BalasHapus
  24. Thanks infonya, sudah saya terapakan pada blog saya dan hasilnya oke. :D

    BalasHapus
  25. kalau di wordpress bisa ga gan?

    BalasHapus
  26. penting buat blog saya yang terbaru nih mbak

    BalasHapus
  27. makasih sudah sharing ilmunya,segera dipraktekkan

    BalasHapus
  28. Thanks gan, work
    tapi kok gambarnya dibuat landscape gak bisa ya

    BalasHapus
  29. ohh ini namanya cara di grid yah, aku baru tau kak, hihi. makasih ya

    BalasHapus
  30. caranya gimana kalo untuk pemula?? saya masih belum ngerti...

    BalasHapus
  31. waduh ane coba masih gagal, knp ya?

    BalasHapus
  32. terimakasih informasinya bermanfaat. langsung dipraktekin dan bisa dong

    BalasHapus
  33. Makasih gan..
    postingan agan sangat membantu.
    Udah bosen ngliat popular post bawaan bloger yang sangat sederhana.

    BalasHapus
  34. Langsung Praktek jos gandos :) invite juga http://caknamedia.blogspot.com/

    BalasHapus

Berlangganan via Email