Cara membuat Populer post dengan Gambar Berputar

Dunia Online Share:

Kali ini Dunia Online memberikan Postingan dengan "Cara membuat Populer Post dengan gambar Berputar"
Sebagai Blogger's, kemungkinan Populer Post sangat bermanfaat buat kita... dimana kita bisa tau, Postingan kita yang Sering di Lihat Pengunjung Blog kita...!!
Maka dari itu,, Sahabat bisa membuat Populer Post dengan gambar Berputar jika di sentu Kursor ..!!

Di Bawah ini Contoh Gambarnya:

Jika Sahabat Tertarik.. bisa Langsung buat di Blog sahabat.

Simak Langka-langka Berikut di Bawah Ini:

•  Login ke akun Sobat.. Bagian Tata Letak --> Tambah Gadget--> Tambahkan Populer Post Bawaan Bloger dan Konfigurasikan Widged dengan mencentang kotak kecil thumbnail dan biarkan kosong pada kotak kecil snippet lalu di Simpan...

•  Saatnya Masuk Pada Bagian Template: edit HTML setelah itu Cari Kode ]]></b:skin>

•  Copy dan Paste'kan CSS berikut di Atas Kode   ]]></b:skin>

 

.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-transition: all 0.5s ease-in-out; <br />-moz-transition: all 0.5s ease-in-out; <br />-o-transition: all 0.5s ease-in-out; <br />transition: all 0.5s ease-in-out; <br />-webkit-transform:rotate(360deg); <br />-moz-transform:rotate(360deg); <br />-ms-transform:rotate(360deg); <br />-o-transform:rotate(360deg); <br />transform:rotate(360deg);}

• Pratinjau dulu untuk memastikan Sudah benar apa tidak... tapi yakin Pasti Benar...

• Klik Simpan..... !!!

Semoga Artikel ini bisa membantu Sahabat Bloger Sekalian

Jika Sobat Suka dengan Artikel ini dan ingin Copy Paste ke Blog Sobat

  jangan Lupa Sertakan Sumbernya;

http://matexcbi.blogspot.com/2012/12/cara-membuat-populer-post-dengan-gambar.html#.UMCiTtmplth