Saturday, July 20, 2013

Membuat Popular Post dengan Animasi Gambar berputar hebat!!

Modifikasi widget popular posts dengan animasi gambar berputar yang akan tampil di blog dapat anda lihat seperti screenshot di bawah ini :

Modifikasi widget popular posts gambar beputar

Cara membuat widget popular posts dengan thumbnail gambar beputar

1. Login Blogger
2. Pilih Tata Letak
3. Pilih Tambah Gadget
4. Pilih Widget "Popular Posts"


5. Silahkan atur sendiri berapa jumlah artikel yang akan anda tampilkan
6. Kalau sudah lalu Save

Langkah selanjutnya untuk merubah widget popular posts dengan efek grid layout :
1. Pilih Edit HTML
2. Centang kotak kecil disamping Expand Widget Templates
3. Silahkan backup template anda
4. Lalu gunakan ctrl+F untuk mencari kode ]]></b:skin>
5. Kalau sudah dapat lalu tambahkan kode berikut dan letakkan diatas kode ]]></b:skin>

1.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. Berikutnya anda cari tulisan PopularPosts1 Kode script lengkapnya biasanya seperti dibawah ini :

01b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
02<b:includable id='main'>
03<b:if cond='data:title'><h2><data:title/></h2></b:if>
04<div class='widget-content popular-posts'>
05<ul>
06<b:loop values='data:posts' var='post'>
07<li>
08<b:if cond='data:showThumbnails == &quot;false&quot;'>
09<b:if cond='data:showSnippets == &quot;false&quot;'>
10<!-- (1) No snippet/thumbnail -->
11<a expr:href='data:post.href'><data:post.title/></a>
12<b:else/>
13<!-- (2) Show only snippets -->
14<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
15<div class='item-snippet'><data:post.snippet/></div>
16</b:if>
17<b:else/>
18
19<b:if cond='data:showSnippets == &quot;false&quot;'>
20<!-- (3) Show only thumbnails -->
21<div class='item-thumbnail-only'>
22<b:if cond='data:post.thumbnail'>
23<div class='item-thumbnail'>
24<a expr:href='data:post.href' target='_blank'>
25<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
26</a>
27</div>
28</b:if>
29<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
30</div>
31<div style='clear: both;'/>
32<b:else/>
33<!-- (4) Show snippets and thumbnails -->
34<div class='item-content'>
35<b:if cond='data:post.thumbnail'>
36<div class='item-thumbnail'>
37<a expr:href='data:post.href' target='_blank'>
38<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
39</a>
40</div>
41</b:if>
42<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
43<div class='item-snippet'><data:post.snippet/></div>
44</div>
45<div style='clear: both;'/>
46</b:if>
47</b:if>
48</li>
49</b:loop>
50</ul>
51<b:include name='quickedit'/>
52</div>
53</b:includable>
54</b:widget>

9. Silahkan hapus semua kode script diatas dan ganti dengan kode script di bawah ini :


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

10. Selesai dan simpan

0 comments:

Post a Comment