Widget Popular Post With Grid Layout

Tampilan widget popular post yang digunakan pada blog ini sedikit berbeda dengan widget lainnya. Selain tampilan yang menarik blog menjadi lebih hidup dengan modifikasi dengan gaya Grid Layout seperti yang digunakan oleh blog ini. Biar lebih jelas saya sediakan screenshotnya seperti yang terlihat dibawah ini :

untuk membuat tampilan popular post seperti diatas dapat dilakukan dengan cara :
pertama  Login blogger anda. kedua masuk ke munu Design > Page Element > Add a Gadget. ketiga Pilih Widget "Popular Post". keempat aturlah persis seperti gambar dibawah ini (untuk jumlah post, bisa anda sesuaikan sendiri). kemudian SAVE

Langkah selanjutnya dengan mengedit HTML blog (Ingat... jangan lupa Backup Template anda dan beri centang pada Expand Widget Templates). carilah kode ]]></b:skin> dan tambahkan kode css berikut diatasnya :


.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:5px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:3px;-moz-border-radius: 1px;-webkit-border-radius: 1px;border-radius: 1px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.6s ease;border: 1px solid #CCC;} .popular-posts ul li img:hover {border:1px solid #ccc;-moz-transform: scale(1.3) rotate(-320deg) ;-webkit-transform: scale(1.3) rotate(-320deg) ;-o-transform: scale(1.3) rotate(-130deg) ;-ms-transform: scale(1.3) rotate(-320deg) ;transform: scale(1.3) rotate(-320deg);}


Langkah berikutnya cari teks PopularPosts1, biar lebih cepat pake (CTRL + F), script lengkapnya bisa dilihat dibawah ini


<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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: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/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' 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 class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>



Ganti kode script diatas dengan kode dibawah ini :


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (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' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' 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 class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Langkah terakhir sebagai pamungkas, simpan hasil pekerjaan anda dan lihat hasilnya...
sumber : kode-blogger.blogspot.com