22
Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery
Setelah sebelumnya pernah membahas Cara membuat Popular Post dengan Thumbnail Horizontal, kali ini kita akan mencoba memodifikasi Popular Post dengan Thumbnail Bentuk Grid atau Gallery. Keuntungan dari cara ini adalah kita bisa sedikit menghemat space atau ruang di blog.

Sistem atau Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery ini sebenarnya sama saja dengan dengan Cara membuat Popular Post dengan Thumbnail Horizontal. Hanya saja pemasangannya tetap di sidebar. Atau bisa juga di footer yang telah di bagi menjadi 2 atau 3 kolom.

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.

Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery
1. Hilangkan ceklist pada snippet.
2. Atur jumlah postingan tampil menjadi 3, 6 atau 9.

Posting Komentar

  1. makasih nih triknyaa bos

    BalasHapus
  2. alhamdulillah ternyata dapat juga yang di cari.....
    makasih ya gan...tutornya bermanfaat ne....,,
    mohon pencerahannya...

    BalasHapus
  3. nyimak aja sob. nice post. ditunggu kunjungan baliknya. :-)

    BalasHapus
  4. Ijin baca2 mas bro biar tambah ilmu, nice share :)

    BalasHapus
  5. Lumayan Buat masukkan.. thks atas infonya..

    BalasHapus
  6. Thanks yo mas..
    bisa tapi saya harus ganti ganti lagi..
    tapi work kok..

    BalasHapus
  7. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    BalasHapus
  8. Tidak berhasil, hasil tampilan Popular Post-nya tidak berbentuk Grid/Gallery..
    Kenapa ya?

    BalasHapus
  9. mantaf agan,thnx untk ilmunya :)

    BalasHapus
  10. mantab mas, tp saya mau coba yang satu lagi "Cara membuat Popular Post dengan Thumbnail Horizontal"

    BalasHapus
  11. Gan kalau di tambahin sendiri tanpa ngganti , di area template gg bisa ta ?

    BalasHapus
  12. aku coba dulu ya.. nanti kalo gagal balik lagi hehehe... mksh

    BalasHapus
  13. nice tips gan,,, di coba widget nya,, terimakasih gan,,

    BalasHapus
  14. Makasih banyak gan
    http://blog-medianet.blogspot.com/

    BalasHapus
  15. Gan kalau cara buat popular post kayak di bawah gimana gan

    mohon infonya gan
    Rubis car portal

    BalasHapus
  16. http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html

    BalasHapus

Mohon maaf bila admin tidak bisa langsung membalas atau pun langsung berkunjung kembali ke blog sahabat blogger yang telah berkunjung ke sini. Kalian bisa meninggalkan komentar yang layak dengan menggunakan Nama dan URL blog sobat. Saya mengaktifkan filter dan comment moderator full sehingga setiap komentar pasti saya baca dan jika memang itu saya rasa harus dijawab, pasti saya akan memenuhinya.

Hanya komentar yang memang saya anggap pantas yang akan diterbitkan. Sekalipun itu kritikan atau ejekan, jika memang itu layak untuk di bahas.

 
Top