New Step Membuat Widget Popular Post dengan Efek Animasi Menarik

New Step Membuat Widget Popular Post dengan Efek Animasi Menarik

Berikut ini adalah Tutorial mengenai cara Membuat Widget Popular Post dengan Efek Animasi Menarik. Ok, tidak perlu berlama-lama dan berbasa-basi, langsung saja, berikut tutorialnya, semoga memberikan manfaat bagi kita semua, disimak, dan yang terpenting langsung di praktekan.


Beriku tini langkah-langkah Pembuatannya :

♦ Langkah pertama Masuk ke akun Blogger Sodara, kemudian Klik Tata Letak , Klik Add Gadget dan pilih Popular Post, terserah DSodara mau memberi judul Popular Post atau apa.

♦ Pada Setingan menu Popular Post silahkan sodara ceklist image thumbnail, adapun untuk cuplikan tidak usah di klik.
 

♦ selanjutnya Jumlah popular Post yang ingin ditampilkan, sodara bisa isi dengan keinginan masing-masing
 

♦ Langkah terakhir Sodara klik save.

♦ Langkah selanjutnya sodara masuk Kembali dasbor Blog sodara, Kemudian klik Edit HTML, Sodara tidak perlu lagi ceklist expand template widget, Sodara selanjutnya tinggal mencari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini tepat di atas kode tersebut.

.sidebar .popular-posts ul li img:hover, .cross2 ul li img:hover {-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:1;border-radius: 50%;}
.sidebar .popular-posts ul{margin:0;padding:3px;}
.PopularPosts .widget-content ul li {padding: .1em 0;}
.sidebar .popular-posts ul li {margin: 0 3px;background:none;float:left;width:110px;list-style-type:yes;border:yes;line-height:2px;}
.sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 110px;height: 110px;opacity: 0.7;opacity:0.7;filter:alpha(opacity=70);background:#3333ff; border:3px solid #cc00ff; border-bottom:3px solid #ffff00; border-right:3px solid #ffff00;padding:5px;}
.PopularPosts .item-thumbnail {margin: 0;}
.sidebar .PopularPosts .item-title {display: yes;}



♦ 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 == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (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 == &quot;false&quot;'> <!-- (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://ajariselalu.blogspot.com/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>

♦ Langkah terakhir yang sodara lakukan tinggal mengklik Save, dan lihat hasilnya pada halaman blog sobat.

Catatan : Sodara Bisa mengganti semua Kode yang berwarna merah sesuai dengan keinginan sodara masing-masing. yang terpenting jika menemukan permasalahan, silahkan bertanya pada kolom komentar Blog atau bisa juga di Buku Tamu, yang penting pertanyaannya jelas.Ok.

 

Demikian tutorial sederhana ini mengenai Membuat Widget Popular Post dengan Efek Animasi Menarik. Semoga bermanfaat, dan

Wassalam...