Mengenai Saya

Foto saya
Doa ayat 286, Surah Al Baqarah: Wahai Tuhan kami! Janganlah Engkau bebankan kepada kami bebanan yang berat sebagaimana yang telah Engkau bebankan kepada orang-orang yang terdahulu daripada kami. Wahai Tuhan kami! Janganlah Engkau pikulkan kepada kami apa yang kami tidak terdaya memikulnya dan maafkanlah kesalahan kami, serta ampunkanlah dosa kami dan berilah rahmat kepada kami.

Isnin, 19 November 2012

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...

Tiada ulasan:

Catat Ulasan