Cara Membuat Popular Post dengan Efek Rolling Style

Popular Post adalah salah satu widget yang disediakan oleh blogger untuk menampilkan postingan-postingan yang paling sering dikunjungi dari suatu blog. Pada tutorial cara membuat popular post kali ini, kita akan memanfaatkan fasilitas widget popular post yang sudah disediakan oleh blogger. Ya... widget popular post standar dengan modifikasi 'Rolling style'.

Penasaran dengan model 'popular post dengan efek rolling style'...
Coba lihat disini

Nah untuk tutorial cara membuat popular post dengan efek rolling style-nya, bisa diikuti melalui langkah-langkah di bawah ini :
  • Login ke akun blogger Anda.
  • Pilih Template, di halaman dashboard blogger Anda.
  • Pilih Edit Template. Sebelumnya Anda bisa membackup terlebih dahulu template yang sedang digunakan, untuk mengatasi terjadinya kegagalan saat edit template.
  • Centang pada tulisan 'expand widget template'. Lalu cari kode ]]></b:skin>. Untuk mempermudah pencarian tekan kombinasi tombol Ctrl + F.
  • Setelah ketemu dengan kode ]]></b:skin>, maka copy kode dibawah ini kemudian paste tepat 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>

  • Maka hasilnya akan menjadi seperti ini :



  • Setelah itu klik Save template.
Jikalau sudah berhasil, maka kini Anda tinggal menambahkan widget popular post itu sendiri. Langkahnya seperti berikut :
  • Pilih Layout atau Tata Letak
  • Maka akan tampil tata letak blog Anda. Selanjutnya pilih Add Gadget
  • Scroll terus kebawah hingga Anda menemukan widget Popular Post
  • Klik Tombol + yang ditunjuk oleh tanda panah seperti gambar di atas.
  • Lakukan penyesuaian mengenai widget popular post yang akan Anda pasang di blog. Setelah itu klik Save.
  • Selesai.

Tidak ada komentar:

Diberdayakan oleh Blogger.