Cara Baru Membuat Widget Popular Post dengan Thumbnails Berputar

Cara Baru Membuat Widget Popular Post dengan Thumbnails Berputar

Berikut ini adalah Tutorial Blog mengenai cara Membuat Widget Popular Post dengan Efek Gambar Berputar Pada Blog. Semoga dengan adanya Tutorial ini, blog kita menjadi semakin cantik dan tentunya menarik pengunjung, kalau tidak yah nggak apa-apa, yang terpenting bisa saling berbagi. Ok, sodara langsung pada inti permasalahan, Sebenarnya artikel ini memiliki cara yang hampir sama dengan cara Membuat Widget Popular Post dengan Animasi Menarik, Jadi akan lebih mudah untuk di ikuti dan di coba. Semoga memberikan manfaat.

Berikut Langkah dan caranya :

♦ 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.

.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: 10px;

-webkit-border-radius: 10px;

border-radius: 5px;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

transition: all 0.5s ease;

border: 3px solid #ffff00;

}

.popular-posts ul li img:hover {

border:3px solid #fff;

-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.3) rotate(-360deg);

transform: scale(1.3) rotate(-360deg);

}


♦ Langkah selanjutnya atau setelah itu, sodara cari kode berikut ini <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
 
♦ Jika sudah ketemu, silahkan sodara 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://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>

♦ Langkah terakhir, silahkan sodara Klik Save template, dan lihat hasilnya di halaman blog sodara.


Demikian artikelnya, sekali lagi semoga bermanfaat, sekian dan terimakasih.

Wassalam…