Blogger Tutorial

Cara Membuat Widget Rainbow Popular Post (Postingan Terpopuler Warna-warni) Part 2

09.12,2 Comments



Nah, kali ini kita masih akan main-main sama widget popular post, cuma bedanya, widget popular post yang akan kita buat kali ini sedikit menggunakan efek hover yang membuat thumbnail (gambar) postingan populer anda bisa muter saat diarahin kursor. Tenang, kita cuma akan main-main sama kode css kok, jadi nggak akan ngaruh ke kecepatan loading blog anda hhe...

Untuk penampakannya bisa anda lihat pada gambar diatas, atau monggo klo anda mau liat langsung di blog saya yang berikut ini:



Lha terus piye kang cara ngebuate? gampang, ayo kita mulai...

1. Login ke Dashboard Blogger/Blogspot anda masing-masing
2. Masuk ke Menu Template, dan klik Edit HTML
3. Klik sembarang didalem bagan xml, dan pencet ctrl+f di keyboard anda untuk memudahkan anda menemukan kode ]]></b:skin>
4. Kalo kode ]]></b:skin> nya udah ketemu, sekarang tempatkan kode css dibawah ini tepat diatas atau sebelum kode tersebut:


/* Rainbow Popular post Part 2 */
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
padding:4px;
    border:1px solid #fff !important;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}
/* Rainbow Popular post Part 2 */

5. Klik Simpan Template, nah untuk anda yang sebelumnya udah masang widget popular post anda bisa langsung ngeliat hasilnya, tapi untuk anda yang belum sempet masang, sekarang kita beralih lagi ke menu Tata Letak
6. Kalo udah di Tata Letak sekarang pilih Tambahkan Gadget 
7. Cari widget Entri Populer
 
 
8. Atur widget sesuka hati anda, kalo mau tanpa tanpa thumbnail (gambar) bisa anda atur kaya gini
 
 
Dan kalo mau dengan gambar bisa anda atur kaya gini (checklist thumbnail gambar)


9. Klik Simpan dan lihat perubahannya :)
10. Selesai! 




hosting indonesia

You Might Also Like

2 komentar:

  1. jadi pelangi gan keren hehe

    BalasHapus
  2. Rainbow cake :D

    Paket wisata karimun jawa http://maniaxtour.com/

    BalasHapus