Friday, December 14, 2012

Modifikasi Widget Popular Post dengan Efek Grid

Modifikasi Widget Popular Post dengan Efek Grid

 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.

 

Popular Post dengan Efek Grid 

 

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>

Bookmark and Share
Artikel yang berhubungan :


0 comments:

Post a Comment

MULTI TAB 1

VIDEO

MULTI TAB 2

HTML

MULTI TAB 3

MULTI TAB 4

MULTI TAB 5



MULTI TAB 6

Entri Populer

MULTI TAB 7


MULTI TAB 9

Buku Tamu

MULTI TAB 10

Daftar Blog Saya

Search




 
KEMBALI KEATAS
') }else{document.write('') } }