Cara Membuat Popular Post dengan Gambar Berputar

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

Baca Juga di Bawah Ini :

ATTENTION PLEACE :
Buat semua pengunjung yang ingin copy-paste diperbolehkan asal mencantumkan..
URL:
http://creatoragus.blogspot.com/

Hal ini untuk menambah rasa pertemanan agar menjadi lebih akrab dan untuk menjaga solidaritas dari para blogger sejati yang ada di indonesia..
Dan apabila terjadi kerusakan pada postingan kami misalnya kode yang salah,Gambar yang tidak valid dll.Sobat dapat menghubungi kami disini
Salam:Run_D Creators