Widget Popular Posts Dengan Efek Spinning Dan Zooming -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Widget Popular Posts Dengan Efek Spinning Dan Zooming, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel CSS3, Artikel Popular Posts, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Widget Popular Posts Dengan Efek Spinning Dan Zooming
link : Widget Popular Posts Dengan Efek Spinning Dan Zooming
Gambar dibawah ini

Widget Popular Posts Dengan Efek Spinning Dan Zooming

Widget popular posts default blogger memiliki tampilan standar yang masih dapat kita modifikasi lagi dengan CSS3 sehingga lebih aktraktif. Kalau sebelumnya kita telah mencoba menambahkan efek marquee pada widget popular posts, maka kali ini kita akan menambahkan efek spinning dan zooming pada thumbnails widget popular posts.

Efek hover spinning dan zooming pada thumbnail widget popular posts adalah efek animasi gambar berputar dan membesar ketika kita mengarahkan pointer mouse pada thumbnail/gambar widget tersebut. Untuk jelasnya silahkan lihat live demonya dahulu dengan mengklik button berikut:

View Demo 

Nah jika tertarik untuk mencoba menambahkan widget popular posts dengan efek hover spinning dan zooming pada blog anda, silahkan ikuti tahapan instalansinya:

Tahapan Pertama

• Setelah login ke akun anda, pada dasbor pilih tata letak >> tambahkan gadget popular posts seperti image berikut:

• Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya �Popular Posts�. Anda bisa menggantinya sesuai keinginan.
• Pada bagian konfigurasi widget popular posts, anda ceklist pada kotak kecil thumbnail, dan untuk snippet tidak perlu.
• Pilih jumlah popular posts yang ingin ditampilkan
• Save atau simpan

Tahapan Kedua:

Menambahkan popular posts dengan efek hover spinning dan zooming atau animasi gambar berputar dan membesar

• Masuk pada menu Template >> Edit HTML (Tidak perlu menceklist Expand Widget Template)
• Kemudian cari kode ]]></b:skin> dan letakkan kode CSS berikut diatasnya

.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'/>

• Ganti semua kode tadi dengan kode berikut:

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

• Save template anda, dan lihat hasilnya!

Demikian tutorial menambahkan efek spinning dan zooming pada thumbnails widget popular posts, jika ingin mencoba menambahkan efek marquee pada popular posts silahkan klik link title posts tersebut! Semoga bermanfaat.

Demikianlah Artikel Widget Popular Posts Dengan Efek Spinning Dan Zooming

Sekianlah artikel Widget Popular Posts Dengan Efek Spinning Dan Zooming kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Widget Popular Posts Dengan Efek Spinning Dan Zooming dengan alamat link https://trikmitos.blogspot.com/2012/11/widget-popular-posts-dengan-efek_15.html