Cara Membuat Artikel Populer dengan Efek Animasi Berputar - Selamat Sejahtera Untuk Sahabat, Pada saat ini anda telah memebaca sebuah artikel yang berjudul Cara Membuat Artikel Populer dengan Efek Animasi Berputar, Kami telah mendapatkan informasi yang sangat penting dan asli untuk memberikan sebuah informasi ini kepada anda, Semoga isi postingan Artikel Blogger, yang telah kami tulis dibawah sini dapat anda pahami. baiklah, Silahkan Dibaca.

Judul : Cara Membuat Artikel Populer dengan Efek Animasi Berputar
link : Cara Membuat Artikel Populer dengan Efek Animasi Berputar

Cara Membuat Artikel Populer dengan Efek Animasi Berputar

Artikel Populer dengan Efek Animasi Berputar memang akan membuat blog kita semakin cantik dan indah. Oleh karena itu saya akan membahas tutorial blog tentang Cara Membuat Artikel Populer dengan Efek Animasi Berputar, memang artikel populer itu sangat penting untuk membuat para pengunjung kita tahu mana sih artikel yang populer pada blog / web ini? Maka dengan demikian mereka akan mengetahuinya.

Dan hasilnya nanti adalah seperti ini :

Untuk cara pembuatannya :
1. Log in ke Blogger
2. Rancangan
3. Tambah Gadget => Pilih Popular Posts
4. Beri Judul Popular Posts

Langkah selanjutnya Cara memasang popular post dengan efek gambar berputar :
1. Rancangan => Edit HTML
2. Tidak perlu Centang Expand Template Widget
3. Cari kode ]]></b:skin> kemudian letakkan kode berikut di atas kode ]]></b:skin>

.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);}

 4. Selanjutnya anda cari kode dibawah ini (tidak perlu centang expand widget templates)

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

kalau sudah ketemu, ganti kode tersebut dengan 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>

 5. Simpan Template.

Keterangan :

Jika pada template anda tidak ada PopularPost1 (warna biru), sobat cari PopularPost2, kemudian kalian ganti kode yang warna Hijau dengan Popularpost2.

Posted by Unknown