23 Widget Popular Posts Dengan Efek Spinning Dan Zooming

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Popular Posts Style Grid And Effect SpinningWidget 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:

Popular Posts Widget

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


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

23 komentar :

  1. Balasan
    1. Terima kasih, apa kbr ukh chomisah?

      Hapus
  2. Bagus banget popular postnya.
    Jadi kepingin pasang di blog saya.
    Makasih infonya, mas..dan salam kenal :)

    BalasHapus
    Balasan
    1. Silahkan jika ingin mencoba memasangnya diblog anda! Terimakasih apresiasinya. Maaf sapaannya kayaknnya keliru, silahkan lihat info profil saya!

      Hapus
  3. Mantab deh widget popular postnya.... :)
    Makasih yaah..

    BalasHapus
    Balasan
    1. Sama-sama, terima kasih juga tuk kunjungan dan apresiasinya.

      Hapus
  4. Apa efek yang sama bisa juga digunakan u/widget recent posts dengan thumbnails?

    BalasHapus
    Balasan
    1. Bisa, efek spinning dan zooming tidak hanya bisa diterapkan pada thumbnail kedua widget tersebut tapi bisa juga diterapkan pada icons social media/bookmarking, pada image ataupun pada link lists. Contohnya anda bisa lihat pada thumbnail recent posts perlabel, popular posts diblog ini, atau pada image profil dan label disidebar blog ini. InsyaAllah tutorial khususnya akan saya posting pada kesempatan yang lain.

      Hapus
  5. oke nih, jadi nambah laman di bawah header, hh
    makasih info bergarganya,

    BalasHapus
    Balasan
    1. Nambah laman dibawah header? Terima kasih juga kunjungan dan apresiasinya.

      Hapus
  6. ini nih blog yang saya sering singgahin dlu kalau mau nyari tutorial :D
    udah lama gak ksini,, ternyata udah ganti domain dari amatullah83 jadi tipstrikblogging
    makin mantep aja nih mba :D

    Salut saya dengan mba (y)

    BalasHapus
    Balasan
    1. Terimakasih sdh sempatkan kembali mampir disini dan terimaksh jg dgn apresiasinya.

      Hapus
  7. amaltul...shida mmg suka laa toturial nie tapi shida ada problem skit...shida kalau boleh nak buat toturial yang boleh masuk link apa yang kita nak letak kat dalam popular post tue...kire kite boleh pilih link mana kite nak letak...ada cara nak buat tak...thanks....

    nnt jemput singgah ke https://rashidahazran.blogspot.com

    BalasHapus
    Balasan
    1. Shida widget popular posts diatas otomatis mendeteksi artikel/postingan berdasarkan banyaknya page view perminggu/pekan, perbulan atau selamanya. Bahasa saya cocok tak dengan bahasa malaysia :)
      Terimakasih apresiasinya shida.

      Hapus
  8. kunjungan balasan sekalian Follow ya. keren nih blognya rapi juga. oya bicara soal popular post kira2 scriptnya bikin nambah jd loading blog jd berat g ya bro???

    BalasHapus
    Balasan
    1. Widget ini khn widget popular posts bawaan blogger jd insyaAllah tdk mmbuat berat loading blog. Thanks apresiasinya.

      Hapus
  9. .. wachhhhhh,, bagus banget nich. ijin bookmark ya?!? ..

    BalasHapus
  10. wah info yang bagus...
    Blogwalking juga ya ke www.sofian555.blogspot.com

    BalasHapus
  11. Semoga aja bagus... di tempat ane..

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!