Merubah Gambar Pada Auto Readmore Lebih Bagus


Merubah Gambar Pada Auto Readmore Lebih Bagus
Sesuai Judulnya, Kali Ini Saya Akan Memberukan Tutorial Bagi Sobat Yang Memakai Autoreadmore
Untuk Dapat Merubah Gaya/Style Readmorenya Menjadi Lebih Bagus Tampilannya
Bagi Sobat Yg Belum Memakai Auto Readmore Segera Pasang Dulu Untuk Bisa Merubah Stylenya
Oke, Langsung Saja ke Tutorialnya

1. Login Blogger
2. Template
3. Edit HTML
4. Centang "Expand Template Widget"
5. Cari Kode ]]></b:skin>
6. Copy Kode Dibawah Lalu Paste Diatas Kode ]]></b:skin>
*Keterangan :
*Pilih Salah Satu Kode Berikut/Dibawah


* Style Pertama :


/* Style Thumb Post By Monster Zila */
.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 Kedua :


/* Style Thumb Post By Monster Zila */
.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);}


7. Kemudian Cari Kode </head>
8. 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
9. 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





Share 'Merubah Gambar Pada Auto Readmore Lebih Bagus' On ...

Merubah Gambar Pada Auto Readmore Lebih Bagus 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.

12 comments: