Modifikasi Widget Popular Post dengan Efek Grid

  

 
Pada dasarnya Blogger sudah menyediakan widget Popular Post ini, tetapi hanya dengan style atau gaya yang sama. Tetapi sudah banyak para Blogger yang memodifikasi widget ini hingga mempunyai tampilan yang wooww. Hanya dengan sedikit bantuan CSS kita bisa merubah tampilan widget Popular Post ini.

Seperti yang akan saya bagikan berikut, dengan menambah beberapa baris CSS dan mengedit kode html widget Popular Post sehingga tampilannya akan berubah dengan efek grid.Inilah hasil akhir setelah memodifikasi widget Popular post ini.

 

 

 

Modifikasi Widget Popular Post Berefek Grid

Pastikan sobat sudah menambahkan widget Popular post di blog sobat.

1. Masuk Dashboard >> Template
2. klik Edit HTML >> Proceed
3. Centang Expand Template Widget
4. Tambahkan CSS berikut Sebelum ]]></b:skin>

 /*Popular Post*/
.popular-posts{margin-left:15px;}
.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;margin-left:4px;margin-top:6px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
.popular-posts ul li img {-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
.popular-posts ul li img:hover {-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);}

5. Kemudian cari kode yang seperti ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
.......................
.......................
.......................
.......................
.......................
</b:widget>

Lalu tandai dan ganti dengan kode ini
 

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h3>
<data:title/>
</h3>
</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'>
<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 -->
<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>
</div>
</b:includable>
</b:widget>

Kategori : Belajar Blog