Popular Post Dengan Grid Thumbnail Efek

Waduh udah lama banget ngak posting tips nih oke langsung aja deh gue jelasin, pasti kita semua udah tahu kan apa itu PopularPost, PopularPost adalah suatu widget yang meratting pengunjung pada blog kita yang nantinya akan di urutkan, menurut gue sich kayknya kayak gituan dech,

oke kalo udah mengerti apa itu popular post langsung ajaj dech tipsnya ini dia :


Cara Membuat Popular Post Dengan Grid Thumbnail Efek :

1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu taruh kode berikut di atasnya

.sidebar .popular-posts ul{margin:0;padding:0px;}
.PopularPosts .widget-content ul li {padding: .1em 0;}
.sidebar .popular-posts ul li {margin: 0 0px;background:none;float:left;width:79px;list-style-type:none;border:none;line-height:0px;}
.sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 75px;height: 75px; background:#333; border:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc;padding:0px;}
.PopularPosts .item-thumbnail {margin: 0;}
.sidebar .PopularPosts .item-title {display: none;}

5. kemudian cari kode dibawah ini

<!-- (3) Show only thumbnails -->
<div class="item-thumbnail-only">
<div class="item-thumbnail">
.......................
.......................
<b:else/>
<!-- (4) Show snippets and thumbnails -->

6. Lalu kalo udah ketemu kode seperti di atas jangan lupa untuk menggantiny dengan kode dibawah ini

<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png'/>
</b:if>
</a>
</div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->

7. Kalo udah jangan lupa di pertinjau dulu sebelum dilihat hasilnya, oke
8. kalo udah di pertinjau dan dilihat hasilnya bgus SIMPAN template anda

Oke kayknya itu dulu dech untuk artikel pada hari ini salam blogger by cobasanasini jangan lupa komentarnya pada artikel ini...!!

0 Coment "Popular Post Dengan Grid Thumbnail Efek", Baca atau Masukkan Komentar

Posting Komentar