Cara Membuat Gambar Postingan Berputar di Blog

Kali Ini Saya Akan Memberikan Tutorial Bagi Sobat Yang Memakai Autoreadmore, tutorial ini di jamin aman untuk blog anda, dan akan mempercantik tampilan do Home Page ( Beranda ) anda ,, pastinya sih gk bakalan rugi, contohnya ?? Lihat saja blog saya, pas di home page kamu lewati saja salah satu postingan saya pasti gambarnya akan berputar dengan sendirinya, dan saya sih menggunakan Style yang nomor 1 ?? bagai mana !, tertarik?, baiklah langsung saja ke TKP ..

• Login Blogger
• Template
• Edit HTML
• Centang "Expand Template Widget"
• Cari Kode ]]></b:skin>
• Copy Kode Dibawah Lalu Paste Diatas Kode ]]></b:skin>

*Keterangan :
*Pilih Salah Satu Kode Berikut/Dibawah

* Style Yang Pertama :

/* Style Thumb Post By riezky-doea.blogspot.com */
.thumb-post img{padding:4px;margin:0 0 0 15px;width:75px;height:75px;background:#fff;border:3px solid #008ABD;border-radius:50px 0 50px 50px;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out}
.post:hover:hover .thumb-post img{-webkit-transform:rotate(-720deg);-moz-transform:rotate(-720deg);-ms-transform:rotate(-720deg);-o-transform:rotate(-720deg);transform:rotate(-720deg)}

*Style Yang Kedua :

/* Style Thumb Post By riezky-doea.blogspot.com*/
.thumb-post img {padding: 4px; margin:0 0 0 15px; width: 72px; height:72px; background: #fff;
border: 3px solid #008ABD; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.post:hover:hover .thumb-post img { border: 3px solid #cccccc; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);}

• Kemudian Cari Kode </head>
• Copy Kode Dibawah Lalu Paste Tepat Diatas Kode  </head>

*Keterangan :
*Pilih Salah Satu Kode Berikut/Dibawah

No Thumbalnails Blue

<script type='text/javascript' src='http://free-files.googlecode.com/files/Post-Thumb-Blue.js'/>

No Thumbalnails White

<script type='text/javascript' src='http://free-files.googlecode.com/files/Post-Thumb-White.js'/>

Preview No Thumbalnails :

No Thumbalnails Blue

No Thumbalnails White

• Simpan/Save Template

NB :
*Bagi Yang Kurang Jelas Bisa berkomentar DIbawah Ini/Kontak Saya Via Fb
*Sobat Bisa merubah Warna Border Sesuai Keinginan Sobat Dengan Merubah Kode Hex Color (#bla..bla..)
Semoga Bermanfaat