Cara buat Menu Popular Post Berputar

Menu Popular Post Berputar


Ini tips-trik saya dapat dari blog sobat saya dan sedikit saya sempurnakan.
Sebelumnya saya mengalami eror karena ada tag tak tertutup entah dimana.
Tapi akhirnya berhasil dan ini caranya. Contoh blognya yang sudah isi coba cek disini.
Langsung saja ya caranya :

1. Masuk akun Blogger - Tata Letak - Add Gadget dan pilih Popular Post!
2. Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya "Popular Posts". Kalian bisa menggantinya dengan nama lain sesuai dengan keingginan.
3. Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu dicek list. Jadi Tampilkan gambar saja.
4. Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan (jumlah maksimal 9) dan Save!!
5. Masuk menu Design/Template - Edit HTML, cari kode ]]></b:skin>

Tempatkan kode dibawah ini tepat diatas kode ]]></b:skin>

/*-- (Popular post gambar berputar) --*/ .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.7) rotate(360deg); -webkit-transform: scale(1.7) rotate(360deg); -o-transform: scale(1.7) rotate(360deg); -ms-transform: scale(1.6) rotate(360deg); transform: scale(1.7) rotate(360deg); }

Selanjutnya cari kode :
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/> .......................</b:widget>

Titik-titik itu panjang isinya pokoknya cari sampai tag penutup </b:widget>

Dan ganti semua kode tersebut dengan kode kode dibawah 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' 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>

Semoga berhasil!! Kalo berhasil jangan lupa di komen ya.

Artikel Lain :