Grid Layout For the Popular Posts Widget

Popular Posts Widget kini dapat kita modifikasi hanya dengan menggunakan CSS saja sehingga tampilannya akan lebih menarik. Ingat, dengan postingan saya tentang Putar Gambar dengan CSS3 tanpa Javascript? mudah2an masih ingat. klo ingat efeknya kan sama dengan postingan tersebut. ketika cursor mendekati image maka akan ada efek yang muncul. 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. Lalu simpan template dan lihat hasilnya.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg