Widget Untuk Popular Post Blogger - Grid Line / Spinning / Zooming

Yes... i did!!! weee... berjaya jugak buat buat kat tepi blog. Semua aku rujuk kat satu blog nie. Link refer kat bawah.

Nie lah rupa baru kat bahagian tepi yang aku maksudkan.
My popular post, new look! In grid line.

Please refer link above to make yours.
Widget Popular Post In Gridline

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

New zoom & spinning...

Yang nie effect lebih advance sikit. Refer above link.
Widget Popular Posts Dengan Efek Spinning Dan Zooming

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Contoh untuk Popular Post (view spinning & zooming)

Step 1
Layout
Add gadget - Popular Post

Edit gadget
Un-tick snippet
Save gadget

Step 2
Template
Edit HTML

Bila klik Edit HTML dia akan keluar tab warning macam kat bawah nie.

klik proceed

Bila klik proceed akan keluar tab macam nie.

Kemudian kena cari
]]></b:skin>

Nak memudahkan pencarian (rujuk gambar atas nie)
1- Tekan Ctrl 'F', satu box search akan keluar. Pastekan ]]></b:skin> dalam box search dan tekan enter.
2- Dah jumpa ]]></b:skin>, copy code CSS di bawah dan paste sebelum perkataan ]]></b:skin>.

Code

.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);
}



Step 3
Masih dalam mode Edit HTML

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

Rujukan bergambar untuk permudahkan.

Kemudian tukarkan code asal dengan code baru di bawah ini.
Dan save template.

Code

<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 == &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.freetradeireland.ie/site/images/no-image.gif'/> </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>

Hasil search. Dapat hasilkan satu widget yang comel. Ngeee... Rasanya kalau rajin study code-code tue, mesti boleh hasilkan macam2x widget yang kreatif untuk blog. Tapi aku malas mau tengok, tengok sikit jer dah errr... pening...