Popular Post Efek Gambar Berputar Admin : Unknown

Assalamu'alaikum,wr.wb

Cara Mudah Membuat Popular post Hanya Thumbnail Gambar Dengan Efek Berputar.

Membuat Popular post Hanya Thumbnail Gambar-Untuk menjadikan blog lebih menarik dengan animasi gambar berputar. Dalam pembuatan Popular post model ini, sobat akan menggabungkan antara popular post default blogger dengan menambahkan kode CSS3 di dalamnya.

Cara pemasangan : Popular post gambar berputar,silahkan disimak:

1. Silahkan log in ke akun blog sobat.

2. Tambahkan widget popular postnya. [ klik menu layout atau Tata letak ]

3. Klik Add widget, cari dan pilih widget Popular post.

4. Hilangkan centang pada snipset atau cuplikan lalu simpan.

5. Pilih menu Template >> klik edit HTML.

6. Cari kode ]]></b:skin> (untuk memudahkan tekan F3 atau ctrl F)

7. Setelah ketemu kode di atas, letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

.popular-posts .item-thumbnail {
float:left;
} 
.PopularPosts .item-thumbnail a img{
height:71px;
width:71px;
display:block;
margin:0;
padding:0;
}
.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);
}

Warna hijau untuk menyesuaikan ukuran gambar,

untuk kode CSS diatas memang belum saya coba,untuk mengamankan template silahkan simpan template sobat dulu untuk berjaga2 jika gagal.

8. Selanjutnya cari kode seperti ini

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

Unuk memudahkan pencarian tekan F3 dak ketikkan huruf yang berwarna merah.

9. Setelah ketemu kodenya, ganti semua kode dalam elemen di atas dengan kode di bawah 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>

10. Langkah terakhir adalah Simpan template dan lihat hasilnya.

Selamat mencoba,semoga sukses.. jika ada yang kurang dimengerti silahkan ditanyakan..terima kasih

Coba juga :

Membuat recent post / artikel terbaru hanya thumbnail gambar

Modifikasi tampilan popular post atau entri popular lainnya