Header Ads

Entri Populer dengan Tampilan Gambar Berputar dan Membesar

Entri Populer dengan Tampilan Gambar Berputar dan Membesar

Adanya widget Popular Posts atau Entri Populer di blog membuat pengunjung dapat mengetahui artikel mana saja yang paling banyak dibaca atau dikunjungi dalam suatu periode tertentu. Blogger sendiri telah menyediakan gadget ini sejak beberapa waktu yang lalu.

Di luar Blogger, para pembuat widget ada yang memodifikasi widget ini agar penampilannya menjadi lebih menarik. Salah satunya adalah widget Popular Posts dengan tampilan berupa gambar-gambar yang tersusun menjadi beberapa baris dan kolom. Selain itu, bila mouse diarahkan atau disorot ke salah satu gambar, maka efek hover-nya akan membuat gambar tersebut membesar dan juga berputar.

Untuk memasang widget Entri Populer keren ini, kita cukup meletakkan skrip pada HTML template blog kita serta menambahkan gadget Entri Populer Blogger tentunya di sidebar. Skrip widget Popular Posts Thumbnail View ini saya dapat dari http://mwcrew10.blogspot.com/2012/01/popular-posts-with-thumbnail-view.html. Terima kasih Sob..

Untuk memasang widget artikel populer dengan tampilan gambar ini, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template. Jika nanti terjadi apa-apa, kita sudah mempunyai salinannya sehingga mudah untuk mengembalikan template seperti semula.

4. Tempatkan kode berikut di bawah kode ]]></b:skin>.

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

5. Klik tombol "SIMPAN TEMPLATE".

6. Klik tab Elemen Laman >> Tambah Gadget >> Entri Populer.

7. Konfigurasikan "Entri Populer" sesuai keinginan Anda. Namun, jangan centang pada kotak "cuplikan" karena akan memunculkan deskripsi singkat dari isi posting pada widget.

Mengonfigurasikan widget "Entri Populer".

8. Klik tombol "Simpan".

9. Pindahkan elemen ke tempat yang Anda inginkan.

10. Klik tombol "SIMPAN".

11. Selesai dan lihat blog Anda.

21 comments:

  1. Thanks sobat atas infonya!
    secepatnya akan di praktekkan di blog baru ane!
    jgn lupa mampir di mari Cara Membuat Virus Komputer.
    Thanks!
    salam "Blogabuabu"

    ReplyDelete
  2. @Irwan Saputra Sama-sama Sob n segera meluncur ke tekape.

    ReplyDelete
  3. Oke sob, belum smpat buka akun nihh.
    oyy ya sob, ane mau nnya nih, kamu nggerti enggk maslah tntang SOE itu??? klw boleh mohon di psting sob artikel ttg TEMPLATE BLOG YANG SEO atau cara mngedit tmplate agar lebih seo frinedly.!
    mohon infonya sob,Cara Membuat Tulisan Berwarna di Facebook Chat.
    thanks!

    ReplyDelete
  4. @Blogadexme SEO ya Sob?
    kalo tentang itu ane juga gak bgitu paham sob..

    ReplyDelete
  5. blogadexme hadir lagi membwa berita mengenai bagaiamana Cara Hack Password Smadav Pro.
    Ouhh gitu ya sob. sekarang ini enaknya beljar tentang hal itu sob, maka nya gw cari-cari artikel mengenai seo. Thanks ya sob.
    ouhh ya sob, q mau nnya ttg blog nihh,.
    bgaimana ya sob membuat tampil hari, tgl, dan jam di bawah nama posttingan pada recent post.
    utk preview nya coba sobat lihat di situs detik.com pada sidebar bwah ada tertera hari, tgl dan jam! mohon infonya sob! thanks!

    ReplyDelete
  6. @Irwan Saputra Mohon maaf Sob, kayaknya ane belum nemuin recent posts yang kayak begitu..
    keren juga tuch

    ReplyDelete
  7. wah keren juga nih sob,pas saya coba ternyata lumayan tidak memakan tempat.thanks berat

    ReplyDelete
  8. @Suryana st Iya sob, ane udah liat tuch di blog ente, keren..

    ReplyDelete
  9. thanks gan,, follow blog ane yah.. http://inforpadu.blogspot.com/

    ReplyDelete
  10. @Admin-Hendra Sama-sama gan..
    Ane udah follow barusan..

    ReplyDelete
  11. nice info sobat :-)

    follow back sob :_)

    ReplyDelete
  12. Sipp infonya gan, segera saya coba,

    From : http://rh-indonesiadoeloe.blogspot.com/

    ditunggu kunjungan dan komennya

    ReplyDelete
  13. @Riki Hardiansyah Saya udah berkunjung dan komen Gan..
    Terima kasih..

    ReplyDelete
  14. gan, infonya keren banget, tapi kalo kita mau buat berbaris ke bawah gitu gmana ya, vertikal maksudnya... thanks

    ReplyDelete
  15. makasih sekali infonya sangat bermanfaat

    ReplyDelete
  16. thax gan n sdah saya cb di blog http://apps--computer.blogspot.com saya

    ReplyDelete
  17. Like And Follow bak sob http://adamskurosaki.blogspot.com Download game gratis

    ReplyDelete
  18. mas, ini maximal yg di tampilin cuma 9 postingan ya? coz saya menoba menampilkan 10 postingan yg muncul tetap 9 popular post?

    ReplyDelete
  19. blOG WALKING.. :D

    masih-tidaknyata.blogspot.com

    ReplyDelete
  20. Makasih sob sudah berbagi tutorialnya. saya sedang nyari ini sob :D

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.