Modifikasi widget popular posts dengan animasi gambar beputar

Tampilan widget popular posts dengan animasi gambar beputar yang akan dibahas kali ini sangat cantik dan menarik sekali terlebih lagi jika dipasang di blog anda, yang pasti pengunjung blog akan betah dan tertarik ingin membuatnya juga. Tentunya penampilan blog yang cantik akan membuat anda sendiri juga pengunjung senang melihatnya. Widget popular posts dengan gambar berputar ini sama dengan istilah kerennya Widget Popular Post With Grid Layout. Bagaimana apakah anda ingin membuat dan memasangnya?

Untuk tampilan widget ini dapat lebih jelas terlihat dan berfungsi jika mouse diarahkan ke gambar popular posts yang mengakibatkan gambar yang ada pada widget popular posts akan berputar-putar sampai orangnya juga ikutan pusing. Modifikasi widget popular posts dengan animasi gambar beputar yang akan tampil di blog dapat anda lihat seperti screenshot di bawah ini :

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"

.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);}textarea></p> </div> </form> 5. Silahkan atur sendiri berapa jumlah artikel yang akan anda tampilkan <br /> 6. Kalau sudah lalu Save<br /> <br /> Langkah selanjutnya untuk merubah widget popular posts dengan efek grid layout : <br /> 1. Pilih Edit HTML<br /> 2. Centang kotak kecil disamping <b>Expand Widget Templates</b><br /> 3. Silahkan backup template anda<br /> 4. Lalu gunakan ctrl+F untuk mencari kode <span style="color: red;">]]></b:skin></span><br /> 5. Kalau sudah dapat lalu tambahkan kode berikut dan letakkan diatas kode <span style="color: red;">]]></b:skin></span><br /> <br /> .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);}<br /> <br /> 6. Berikutnya anda cari tulisan <span style="color: red;">PopularPosts1</span><br /> Kode script lengkapnya biasanya seperti dibawah ini :<br /> <div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div> <div align="center"> </div> <div align="center"> <textarea cols="55" name="txt" rows="100" style="height: 130px; width: 453px;" wrap="VIRTUAL"><b:widget id='PopularPosts1' locked='false' title='Popular Post' 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'> <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> <div style='clear: both;'/> <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>textarea></p> </div> </form> 9. Silahkan hapus semua kode script diatas dan ganti dengan kode script di bawah ini :<br /> <div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div> <div align="center"> </div> <p align="center"> <textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><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>textarea></p> </div> </form> Semoga pembahasan tentang <b>Cara Modifikasi Widget Popular Post With Grid Layout</b> dapat bermanfaat untuk anda semua dan selamat dicoba saja widget ini selagi gratis.</div> </div>