Cara Modifikasi Widget Popular Post Warna Warni - Assalamualikum wr.wb hai sobat pada postingan kali ini saya akan membahas tentang Cara Modifikasi Widget Popular Post Warna Warni , Memasang widget popular post itu sangat penting bagi kita, agar pengunjung di blog kita itu tau mana yang paling banyak dibaca artikel di blog tersebut .
nah dan kali ini saya akan memodifikasinya menjadi warna warni seperti yang terlihat diatas, memang memodifikasi popular post itu bertujuan untuk menambah keharmonisan dan menambah keindahan dalam suatu blogger, dan juga cara tersebut dapat dilakukan dengan anda semua .
Widget popular post merupakan widget yang salah satunya penting bagi blog, karena widget ini bertujuan untuk Mengetahui Postingan manakah yang paling banyak dibaca, atau artikel yang paling banyak dikunjungi, dan oleh karena itu dengan kalian yang ingin mencoba tutorialnya monggo silahkan .
dan dengan memodifikasi popular post warna warni pengunjung akan fresh dan juga betah dalam blog tersebut, nah jika kalian ingin membaca tutorial memodifikasi popular post warna warni silahkan kalian baca pada berikut ini .
Cara Modifikasi Widget Popular Post Warna Warni
- Buka Blogger Anda > lalu pergi ke dashboard
- Di samping kiri anda pada menu kalian klik "template" dan kemudian klik "Edit HTML"
- Setelah itu masukkan kode dibawah ini diatas kode "]></b:skin>" dan jika template blog agan sudah dibuat menjadi Template valid CSS3 masukkan kode dibawah ini diatas kode "</style>"
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;
}
.PopularPosts ul {margin:.5em 0;list-style:none;font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;color:black;counter-reset:num;
}
.PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;
}
.PopularPosts ul li {background-color:#eee;margin:0 10% .4em 0;padding:.5em 1.5em .5em .5em;counter-increment:num;position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {font-weight:bold;font-size:120%;color:inherit;text-decoration:none;
}
.PopularPosts ul li:before {content:counter(num);display:block;position:absolute;background-color:black;color:white;width:30px;height:30px;line-height:30px;text-align:center;top:50%;right:-10px;
margin-top:-15px;-webkit-border-radius:30px;-moz-border-radius:30px;
border-radius:30px;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:2%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}
- Nah Jika Kalian Sudah Mengopy kode diatas Klik Dibagian atas yaitu "Simpan Template"
- Dan Pastikan Kalian sudah membuat widget popular post diblogger kalian, jika tidak buat ya mana bisa ??.
Asiik bisa diterapin nih:)
ReplyDeletemakasih mas :)
Silahkan Terapin Saja Di Blog agan ^_^
DeleteIzin di terapkan om :D
ReplyDeleteWarna warni :v hehe
Kesalahan saat mengurai XML, baris 306, kolom 3: The element type "b:skin" must be terminated by the matching end-tag ""
ReplyDeletePastikan Kode Diatas Tepat gan pada waktu memasangnya !!!
Deletemantep bos :D
ReplyDeletewarna warni ~
waw keren gan, blog baru ya? hha. Nice share gan (y) , follow juga success
ReplyDeleteThis comment has been removed by the author.
Deletewah keren widget popular nya...
ReplyDeletemakasih gan
iya sama sama :D
Deleteindah sekali gan widgetnya, bookmark dlu ah, nanti mau di coba :D
ReplyDeleteSilahkan Saja Mas Fajar di bookmark dulu :D
Deletekeren gan tp kayanya ga cocok dgn template saya
ReplyDeletemakasih sudah berkomentar mas amaresa :D.
Deletekeren izin coba dulu ah terima kasih udh share
ReplyDeleteSilahkan mbak putri di coba,, iya sama sama mbak :D
DeleteWalah Bisa Dicoba Nih :D , Tapi Buat Berat Ga ?
ReplyDeleteTidak berat kok gan asal widget nya sedikit :D
DeleteOalah boleh diterapin tuh gan :) makasih infonya :)
ReplyDeletesilahkan saja diterapin mas bisma
Deletescriptnya lumayan banyak ya mas... tapi hasilnya bagus bisa warna warni :D
ReplyDeletemakasih sharingnya :)
iya nih mbak scriptnya lumayan banyak, akan tetapi jika memodifikasi popular post ini popular post akan indah dan menarik ^_^ .
Deletewah sumpeh ini keren banget.. bisa ngebuat tambah simple nih..
ReplyDeleteterima kasih atas kunjunganya :)
Deletekeren nih, :D
ReplyDeleteberwarna warni, bisa diubah kan gan warnanya ? :)
Bisa Kok mas tinggal ganti kodenya
Delete.PopularPosts ul li:nth-child(1) {background-color:Kode Warna;margin-right:2%}
Posting yang menarik.
ReplyDeleteMakin Keren nh mastah klo gini blognya :-D
ReplyDelete