11:15 AM
Hzndi
Yowman kembali hadir lagi di Tutorial Blog dan SEO. Di tutorial kali ini saya akan menjelaskan bagaimana caranya membuat widget popular post atau artikel terpopuler menjadi lebih atraktif, cantik dan menarik. Hanya dengan menyalin beberapa kode CSS, dan Wushhh.... Widget Popular post kamu akan terlihat sangat menarik dan cantik seperti gambar diatas.
Widget ini suda saya coba sendiri dan hasilnya pun sudah saya screenshot. Gambar diatas adalah hasilnya, cara membuatnya pun cukup mudah. Dan bagi kamu yang tertarik memakai widget ini, silakan lihat caranya di bawah ini. Di perhatikan yah !
1. Login ke Blogger.com dengan Akun kamu.
2. Klik Tata Letak --> Tambah Gadget --> Entri Populer --> Tampilkan Entri Populer hanya Judulnya saja, jangan memakai gambar dan cuplikan. 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 li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/* Rainbow Popular Post by http://hzndi.blogspot.com*/#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
6. Simpa dan kamu lihat hasilnya, pasti cantik sekali sob :D
Posted in: 
pertamax dulu kang
ReplyDeleteyah disini komennya pertamax lagi, ini yang erkahir kali yah kang komennya pertamax doang, lain kali nyambung ke postingan gan
Deleteini dulu pernah saya praktekin. lagi-lagi gagal di tengah permainan, tapi. keluh deh. dasar saya ya..
ReplyDeleteyang bener om ? kan diatas sudah saya jelaskan dengan detail, pasti bisa kok hehe
Deleteblog tutorial ternyata, met kenal ya
ReplyDeletesalam kenal juga :)
Deletekeduanya ^_^
ReplyDeletekeduanya apaan gan ? lain kali komennya yang nyambung yah
Deletewow..blog jadi lebih semarak dengan warna warni ceria :)
ReplyDeleteiyah jadi lebih cantik dan menarik om hehe
Deleteijin belajar pakenya kang
ReplyDeletesilakan gan :)
Deletetampilannya sekarang sangat FRESH!
ReplyDeletedua jempol kang.. :)
heheh thanks gan maaf yah belom bisa berkunjung nanti ane kunjung ke blog agan deh :)
Deletewah boleh dicoba nihh.,
ReplyDeleteTukaran link yuk gan PR1/
untuk sementara ane g nyediain tuker link gan
Deletewihh mantapp..
ReplyDeleteCoba dlu ah
sip gan silakan dcoba
Deletekira2 bikin blog kita berat ndak ya?
ReplyDeleteengga tuh, kan cuma nambahin warna doang di backgroundnya, blog ane aja ga terlalu berat
Deletekunjungan silaturahmi sob...
ReplyDeletekalo ubah warnanya gimana sob? merahnya terlalu nyolok... hee
bsa sih gan tapi ribet, soalnya ane juga ga terlalu hapal kode2 warnanya
Deletekeren nie gan. bisa menarik perhatian untuk membaca ya. terima kasih ya :D
ReplyDeletebetull sekali gan :D oke sama2
DeleteKeren Sob, jadi bagus untuk tampilannya.
ReplyDeletesangatt keren dong dan cantik tentunya
Deletetutorial blogger memang skrng makin cool..
ReplyDeletewarna warni gitu kyak lolipop... hahahah :D
hehhehe tapi bagus kan hehe
Deletepengin coba, sayang saya belum berani otak-atik kode begituan
ReplyDeletecoba saja sob pasti bisa kok
DeleteWidgetnya menarik bgt sob. Aku malah baru tahu klo bsa dibuat warna-warni kek gini, kreatif jg ya.
ReplyDeleteKpn2 aku coba ah. Klo skrng lg sibuk persiapan buat lebaran.
Minal aidzin wal faidzin sob :)
ya sob Minal aidzin juga
Deleteboleh dicoba nih sobat, blog aku blm dipasang popular post nya, kayaknya tambah keren kalo dipasang widget popular post warna warni hehehe... Makasih sobat :)
ReplyDeletedipasang dong ane aja udah di pasang tuh hehe
Deletewowo keren sob, ijin praktek....^_^
ReplyDeletesilakan gan
Deletefollow sukses :) terima kasih ya sudah berkunjung di blogku.
ReplyDeleteeh, ini berat nggak?
yoi ntar ane folback deh, engga berat sob
Deletetakut makin berat neh blog ane kalo dipasang kaya beginian? Tp untuk menambah wawasan sangat baik, thx sob, nice post
ReplyDeletepasti bisa kalau mau nyoba hehe
DeleteWaduh... rumit juga ni, tapi keren.
ReplyDeleteOh ya salam kenal mas
Sealamat Hari Raya Idul Fitri
Minal Aidin Wal Faidzin
masih puasa sehari om, belum lebaran :)
Deletewaw keren nih..
ReplyDeleteI like it..
keren tapi kalo warna warni mah saya tetap dengan pendirian terlalu "rame" hehe :)
ReplyDeleteyah terseranh abang saja hehe
Deletewaduuu baguus njadi niiii.. manteeb.. tpi kalau saya pasang di blog saya nnti berat.. soalnya sdah ada gambarnya bnyk..
ReplyDeletetapi ane pake di blog ane ga berat banget sob :)
Deletewah, berhasil, berhasil, berhasil....
ReplyDelete>_<
thanks banget yaaaa
heheh oke sama2 :D
Deletepengen banget pake ini, tapi udah berkali2 gagal bro, hehe
ReplyDeletegagalnya di bagian: habis copas kode di atas, trus di-preview ternyata malah muncul di atas header blog (paling atas sebelum judul blog). heuheu
*mohon pencerahannya* thx
Masa iya pet ga bisa ? udah di ikuti dengan benar belum ? ane buktinya lancar saja ?
Deletekeren om ane suka
ReplyDeletemakasih ya
Sam2
DeleteSaya sudah praktekan dan hasilnya juga sudah bisa tampil, tapi ada sedikit masalh , pasa tampil nomornya keluar dari lingkaran, apa bisa di perkecil ya
ReplyDeleteSaya Copas mas :)
ReplyDeleteJangan kebanyakan copas yah hehe
DeleteSUKSES GAN ...trima kasih ya..
ReplyDeleteudah saya praktekkan di blog saya.
Gan, untuk Popular Post ke-10 kenapa nggak muncul ya?
ReplyDeleteUntuk yang pake 2 popular post gimana mas,,, tolong bantuannya...???
ReplyDelete2 Popular post ? tinggal ID-nya aja dirubah
DeleteTernayata sudah bisa kang,, klo yang pake 2 popular post tinggal ganti popularpos1 dengan popularpost2... Sekali lg terimakasih ilmunya...
ReplyDeleteDitunggu kunjungan baliknya... sekalian klo boleh follownya juga... salam kenal..
Akhirnya ada juga yang share dan malah ketemu di sini artikelnya...
ReplyDeleteMantap sob saya sudah coba dan sukses silahkan lihat di blog saya..
Terima kasih sudah berbagi.....
Sama2
Deleteterimakasih sob
ReplyDeletesudah saya praktekkan dan berhasil
Ok dongs
Deletetesting dulu ya gan ??
ReplyDeleteSilakan ente coba aja gan
Deletesaya sudah menerapkan cara diatas tapi kok jadi aneh di blog saya ya?, boleh minta solusinya gak? lihat blog saya
ReplyDeletepfft :v
DeleteBuat yang di wordpress mas..?? Ajarin Gua dong Cssnya
ReplyDeleteBelom nemu bray
Deleteini buat berat loading blog ga mas?
ReplyDeleteEngga dongs
Deleteinfo yang sangat membantu terima kasih
ReplyDeleteSama2
Deletethanks ya gan,izin praktek
ReplyDeleteSilakan mari :)
DeleteMakasih gan, tampilan jd cantik..
ReplyDeleteSama2 bro
Deletebismillah saya ikutan belajar mas, akan saya coba bereksperimen di blog saya semoga berhasil.salam yuli
ReplyDeleteSilakan
DeleteJadi sih tapi agak berantakan sob :/
ReplyDeleteIya kah ? Di ane engga tuh :3
Delete