Membuat Artikel Popular Dengan Image Zoom|Berputar Versi Media-Mimpi

Baik saya akan sedikit share tentang ilmu yang telah saya dapatkan dalam mendesign blog, mungkin tutorial ini sudah banyak yang tau juga tentang cara membuat Membuat Artikel Popular Dengan Image Zoom|Berputar tetapi tetap saja ilmu wajib di amalkan,.

Tutorial ini saya modifikasi sedemikian rupa sehingga hasilnya bisa dilihat didalam artikel populer saya sendiri, sebelumnya saya akan menjelaskan dulu apa itu artikel populer? Artikel populear adalah artikel yan dalam blog banyak dilihat dan dikunjungi serta banyaknya komentar didalam link arikel tesebut.

Baik langsung saja ke tutorial tenang cara Membuat Artikel Popular Dengan Image Thumbnail Zoom|Berputar Versi Media-Mimpi.

1.Masuk terlebi dashulu ke blogger sobat tentunya.

2.Pergi ke menu template > Jangan lupa cetang kotak Expand template widget.

3.Lalu cari code ]]></b:skin> dengan cara tekan (ctrl+f) scara bersamaan.

4.Kalau sudah ketemu copy code dibawah lalu paste tepat diatas code ]]></b:skin> tersebut.

  /* -- (Popular Post) -- */ .item-thumbnail img {margin: 0px 20px 0 0;padding: 4px;float: left; -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color: #24282a;border: 1px solid #383c3e;text-align: left;width:60px;height:60px;opacity:0.6; filter:alpha(opacity=40)} .item-thumbnail img:hover{-moz-opacity:100; filter:alpha(opacity=100); opacity:100;} .item-snippet {display:none;} .item-title{display:none;} .popular-posts {width: 240px;float: left;margin:0 0 0px 0;} .popular-posts ul {width: 240px;margin: 0px 0 0 0;padding: 0;float: left;list-style: none;} .popular-posts ul li {width: 90px;height: auto;margin:0 0px;float: left;display: block;font: normal 13px Arial, Helvetica, sans-serif;color: #000;line-height:10px;background: none;} .popular-posts ul li img {padding:0px;-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;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);} <br>

5.Lalu Save Template.

6.Setelah itu pergi ke Tata Letak blog > Tambah Gadget > Entri Populer, Atur seperti gambar dibawah,.

7.Setelah itu Save dan lihat hasilnya,.