CARA MEMBUAT POPULAR POST BERGERAK
CARA MEMBUAT POPULAR POST BERGERAK – Cara membuat thumbnail popular post bergerak ternyata bisa dengan mengatur kode cssnya saja dan menghapus beberapa baris script yang sudah ada pada default gadget popular post.
 |
| cara membuat popular post widget |
Tutorial Cara memasang popular post dengan thumbnail bergerak
1. Seperti biasa yang harus pertama kali dilakukan adalah masuk dashboard blogger
2. Pilih Layout > add a gadget > pilih Popular Post
3. Pilih pengaturan seperti pada gambar berikut ini
2. Pilih Layout > add a gadget > pilih Popular Post
3. Pilih pengaturan seperti pada gambar berikut ini
 |
| popular post |
4. Setelah itu masuk ke Template > Edit HTML > Proceed
5. Masukan kode css berikut pada kode css blog template
.popular-posts .item-thumbnail{float:left}
.popular-posts ul{padding-left:8px;padding-top:4px}
.popular-posts ul li{list-style-image:none;list-style-type:none;display:inline}
.popular-posts ul li img{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;border:2px solid #fff;padding:0}
.popular-posts ul li img:hover{border:2px solid #fff;-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)}
6. Centang Expand widget template cari kode <!– (3) Show only thumbnails –> dengan ctrl+f
7. HAPUS script yang berwarna merah dan MASUKAN kode yang berwarna biru pada kode widget tersebut
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:title='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' />
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
5. Selesai maka hasilnya akan berupa seperti gambar dibawah ini
 |
| cara membuat popular post bergerak |
Demikian tutorial CARA MEMBUAT POPULAR POST BERGERAK semoga bermanfaat
