Hai sobat kali ini saya akan membagi pengalaman saya bagaimana cara membuat popular post beda dari yang sebelumnya.Kali ini popular post tampilan nya hanya gambar dan gambar tersebut bisa berputar seperti gangsing kata orang jawa se :). Bila sobat ingin membuat langsung ajah simak di bawah ini.
Popular Posts Widget kini dapat kita modifikasi hanya
dengan menggunakan CSS saja sehingga tampilannya akan lebih menarik.
Berikut screen shot dari widget ini
Trus bagaimana cara memasangnya? ikuti saja langkah dibawah ini!
1. Masuk ke
layout >> tambahkan sebuah gadget >> pilih Popular post.
2. Hilangkan tanda di kotak
snippet
3. sekarang masuk ke
Template/Design > Edit HTML.
jangan klik kotak
Expand Widget Templates. lalu cari teks
PopularPosts1 seperti kode di bawah ini
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
4.Setelah ketemu,
gantikan kode tersebut dengan kode di bawah 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>
5.setelah itu pindahkan kode di bawah ini tepat di atas
]]></b:skin>
.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:30px;}
.popular-posts ul li {list-style-image: none;list-style-type:
none;display:inline;}
.popular-posts ul li img {padding:0px;-moz-border-radius:
5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition:
all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s
ease;border: 2px solid #CCC;}
.popular-posts ul li img:hover {border:2px solid #ccc;-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.Simpan Tempalate .
Semoga Berhasil :)
Sumber:
oketrik.blogspot.com/2011/10/grid-layout-for-popular-posts-widget.html
