Saturday, August 18, 2012

Cara Membuat Widget Popular Post Warna Warni V.2


Kemarin saya sudah membagikan cara bagaimana menambahkan widget popular post warna-warni versi ke 3. Nah kalau yang ini sama saja dengan widget yang kemarin, namun yang saya bagikan ini adalha versi yang ke-2 nya. Tentunya dengan menambahkan widget ini akan semakin terlihat cantik dan menarik. Bedanya, kalau kemarin tidak ada efek hover atau gambar yang bisa berputar, kalau versi yang kedua ini bisa menampilkan gambar yang bisa berputar loh!

Saya sendiri sudah merasakan dan mencoba widget ini. Dan menurut saya widget ini tidak terlalu berat, masih standar hehe. Untuk screenshotsnya lihat gambar diatas, itu sudah saya coba sendiri kok :). Oke bagi kamu yang mau mencoba widget ini, silakan lihat caranya yah.

1. Login ke Blogger.com.

2. Klik Tata Letak --> Tambah Gadget --> Entri Populer --> Tampilkan Entri Populer hanya Judulnya saja, boleh memakai GAMBAR tapi saya menyarankan untuk tidak memakai cuplikan agar terlihat lebih rapi. Atur jumlah popular post yang ingin ditampilkan, boleh 3 ,5 ,7 atau 10, jumlahnya Terserah kamu saja. 

3. Klik Simpan.

4. Kemudian kamu klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini
5. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Cari kode  ]]></b:skin>. Lalu kamu salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>.

/* Rainbow Popular repost by http://hzndi.blogspot.com*/
#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 repost by http://hzndi.blogspot.com*/

6. klik Simpan dan kamu lihat hasilnya. Cantik bukan ? warna warni gitu hehehe

Postingan Terkait:

57 comments:

  1. tips trik dan bang HZNdi emang keren2 lho, pasti ada sesuatu yang baru... ^_^

    ReplyDelete
    Replies
    1. heheh makasih bang mboir :)

      taqobalallahu minna waminkum yah bang :D

      Delete
  2. bagus sih mas pengen saya coba, tapi apa nantinya blog tambah berat?

    ReplyDelete
  3. bole bikin cantik blog juga ni sobat.. Good trick

    ReplyDelete
  4. kayanya cocok ne dipasang di blog ane, tp masih sibuk mudik nih.. Blum bisa ngoprek kompi haha

    ReplyDelete
  5. wah menarik nich tapi membuat loading berat ga?

    ReplyDelete
  6. Wah, bagus tutorialnya nih, baru ketemu nih tipsnya, membuat widget populer post berwarna. makasih sob untuk menambah referensi, maklum pedatang baru di blogger. ok deh.....salam kenal dan terus berkarya memberikan yang terbaik. sukses for your blog.

    ReplyDelete
  7. wah jadimenarik perhatiaan ya gan. jadi banyak yang baca nantinya ya.

    ReplyDelete
    Replies
    1. so pasti sob, kalau kayak begini kan jadi lebih fresh :)

      Delete
  8. keren sob triknya demonya ada disamping itu kannn

    ReplyDelete
  9. kok bisa buat tutorial seperti ini ya, keren :)

    ReplyDelete
    Replies
    1. heheh iyah dong :) makasih sudah datang rakyan

      Delete
  10. Sepuluh jari tersusun rapi, bunga melati pengharum hati, comen terkirim pengganti diri, MOHON MAAF LAHIR DAN BATHIN di hari yang suci nan fitri ini saya selaku admin bisonl.info mengucapkan SELAMAT HARI RAYA IDUL FITRI 1433 H, MINAL AIDIN WALFAIDZIN, MOHON MAAF LAHIR DAN BATHIN bagi yang merayakan hari kemenangan

    ReplyDelete
  11. iya, memang tak ada habisnya ilmunya beliau nih.

    ReplyDelete
    Replies
    1. wah jangan panggil saya beliau om, kesannya sudah tua banget padahal masih sekolah :D

      Delete
  12. kereeeeeeen beroooooo...

    oh ya,

    Selamat Hari Raya Idul Fitri bagi yang menjalankan
    Semoga ibadah yang telah kita jalani selama sebulan penuh mendapatkan balasan yang setimpal dari Allah SWT
    Dan semoga kita diizinkan oleh Allah untuk bertemu dengan bulan Ramadhan dan memperoleh kemenangan pada tahun depan
    Mohon maaf kalau saya pernah salah meski hanya bertemu di dunia maya :D

    ReplyDelete
  13. . . wachhhhhhhhhhhhhhhhhhhh,, bagus banget kawan. jadi kayak pelangi gitu. he..86x. keren . .

    ReplyDelete
  14. waaah keren tuh
    jadi warna warni kaya balonku

    ReplyDelete
  15. keren sob.
    mohon maaf lahir & bathin ya sob :)

    ReplyDelete
  16. Makasih tutornya kang. Maaf ,baru kunjung. Minal aidzin wal faidzin ya.

    ReplyDelete
  17. wah kren nih widgetnya bro kayak es cream hehe,, saya save dah ke notepad++ ku buat koleksi hehe,,makasih sharenya ea hehe

    berkunjung di blog sobat.. Minal Aidzin Wal Faidzin Mohon Maaf lahir dan bathin ea..

    -Master Venomia-

    ReplyDelete
  18. Wah menarik nih postingannya ^^

    Oh iya, walaupun udah lewat, met lebaran ya, maaf lahir batin :)

    ReplyDelete
  19. Keren juga tuh widgetnya... bisa dicoba2 nih... :D

    ReplyDelete
  20. ihhhh kren,,,
    tp blog ku jd berat,,,
    ku hapus azz,,
    cuma mau coba doank.

    ReplyDelete
  21. kunjungan balik...
    wah, bagus bagus....
    bikin blog jadi lebih berwarna... ^^
    aku coba yah...
    terima kasih...

    ReplyDelete
    Replies
    1. Iyah dong, jd nama profil ente skrang awan warna warni aja :D hehe

      Delete
  22. wgwgwg iya cuman 20mb hahaha, la nge-Share apa lagi gan ..gg ada yang di share gan. hahaha.. thx gan.. :), ane salut sama random post yg warna2 itu gan haha ingin masang, tpi widgetnya sdah full hehehe.. terimakasih gan..

    ReplyDelete
  23. mantap sob saya juga pernah convert dari newspapertimes cuman not work rata semua pas coba disini work 100% gan makasih

    ReplyDelete
    Replies
    1. heheh iyah gan sama3, wong saya juga paake tuh :)

      Delete
  24. wah keren abies gan...sukses...tanks gan.

    ReplyDelete
    Replies
    1. kang bazzo kayaknya baru nongol lagi nih :)

      Delete
  25. Thanks Gan...
    Dah sukses...

    Btw ada tutorial untuk mengubah threaded comment ke format defaultnya nggak Gan.. thanks ya

    ReplyDelete
  26. keren tapi mo nanya itu kode ]]> belakangnya ada titiknya kah soalnya saya dah coba ga berhasil atau mungkin kodenya ga sama ya dengan template saya?

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More