12:48 PM
Hzndi
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>.
#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*/#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) ;
}
6. klik Simpan dan kamu lihat hasilnya. Cantik bukan ? warna warni gitu hehehe
Posted in: 
tips trik dan bang HZNdi emang keren2 lho, pasti ada sesuatu yang baru... ^_^
ReplyDeleteheheh makasih bang mboir :)
Deletetaqobalallahu minna waminkum yah bang :D
bagus sih mas pengen saya coba, tapi apa nantinya blog tambah berat?
ReplyDeleteengga sb, ane aja make, n ga berat tuh
Deletebole bikin cantik blog juga ni sobat.. Good trick
ReplyDeleteheheh sami2
Deletekayanya cocok ne dipasang di blog ane, tp masih sibuk mudik nih.. Blum bisa ngoprek kompi haha
ReplyDeleteKalw gt pas plg mudik wajib coba gan :D
Deletewah menarik nich tapi membuat loading berat ga?
ReplyDeleteengga sob kalau menurut ane mah
DeleteWah, 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.
ReplyDeletesalam kenal juga gan :)
Deletewah jadimenarik perhatiaan ya gan. jadi banyak yang baca nantinya ya.
ReplyDeleteso pasti sob, kalau kayak begini kan jadi lebih fresh :)
Deletekeren sob triknya demonya ada disamping itu kannn
ReplyDeletebener sob itu sobat tau :)
Deletekok bisa buat tutorial seperti ini ya, keren :)
ReplyDeleteheheh iyah dong :) makasih sudah datang rakyan
DeleteSepuluh 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
ReplyDeletemaaf lahir batin juga yah :)
Deleteiya, memang tak ada habisnya ilmunya beliau nih.
ReplyDeletewah jangan panggil saya beliau om, kesannya sudah tua banget padahal masih sekolah :D
Deletekereeeeeeen beroooooo...
ReplyDeleteoh 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
selamat lebaran sobat nafi
Delete. . wachhhhhhhhhhhhhhhhhhhh,, bagus banget kawan. jadi kayak pelangi gitu. he..86x. keren . .
ReplyDeletehehe iyah dong, :D
Deletewaaah keren tuh
ReplyDeletejadi warna warni kaya balonku
makasih sudah datang sobatku
DeleteMakasih tutornya kang. Maaf ,baru kunjung. Minal aidzin wal faidzin ya.
ReplyDeleteheheh gpp gan makasih yah sudah datang
Deletewah kren nih widgetnya bro kayak es cream hehe,, saya save dah ke notepad++ ku buat koleksi hehe,,makasih sharenya ea hehe
ReplyDeleteberkunjung di blog sobat.. Minal Aidzin Wal Faidzin Mohon Maaf lahir dan bathin ea..
-Master Venomia-
selamat lebarang juga gan rahmat
Deletehasilnya so unyu yaaaa :))
ReplyDeleteiyah dong sama kayak adminnya unyu2 ;D
DeleteWah menarik nih postingannya ^^
ReplyDeleteOh iya, walaupun udah lewat, met lebaran ya, maaf lahir batin :)
maaf lahir batin juga nis :)
DeleteKeren juga tuh widgetnya... bisa dicoba2 nih... :D
ReplyDeletesilakan ente coba sobatku
Deleteihhhh kren,,,
ReplyDeletetp blog ku jd berat,,,
ku hapus azz,,
cuma mau coba doank.
tapi di blog ane ga berat sob
Deletethanks sobat dayat
ReplyDeletemaaf lahir batin juga sobat
ReplyDeleteSelamat lebaran juga gan :)
ReplyDeletekunjungan balik...
ReplyDeletewah, bagus bagus....
bikin blog jadi lebih berwarna... ^^
aku coba yah...
terima kasih...
Iyah dong, jd nama profil ente skrang awan warna warni aja :D hehe
Deletewgwgwg 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..
ReplyDeleteRandom post yg mana bang ?
Deletemantap sob saya juga pernah convert dari newspapertimes cuman not work rata semua pas coba disini work 100% gan makasih
ReplyDeleteheheh iyah gan sama3, wong saya juga paake tuh :)
Deletewah keren abies gan...sukses...tanks gan.
ReplyDeletekang bazzo kayaknya baru nongol lagi nih :)
DeleteThanks Gan...
ReplyDeleteDah sukses...
Btw ada tutorial untuk mengubah threaded comment ke format defaultnya nggak Gan.. thanks ya
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?
ReplyDeleteAne cba ah...
ReplyDeleteJadi keren nih...thanks ya
ReplyDelete