tahap pertama :
Read More ->>
- Masuk akun Blogger - design/Rancangan - Add Gadget dan pilih Popular Post seperti gambar dibawah ini (kalau tidak ada bisa cari entri Popular) :
- Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya "Popular Posts". Kalian bisa menggantinya dengan nama lain sesuai dengan keingginan.
- Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu
- Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan
Save
tahap kedua
Tahap Kedua : Cara Membuat Animasi Popular Post dengan Gambar Berputar
- Masuk menu Design/Rancangan - Edit HTML, dalam peng-editan ini tidak perlu men-ceklist Expand Widget Template
- Kemudian cari kode
]]></b:skin>dan tempatkan kode CSS dibawah ini di atasnya
.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); }- Selanjutnya cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
- 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>
- Save template kalian
