Cara Memodifikasi Widget Popular Post

Selamat malam :) kali ini saya akan share cara memodifikasi WIdget popular post, mungkin sudah banyak yang menulis artikel seperti ini, tapi saya akan coba menulis kembali dengan sedikit lebih sederhana :) Disini saya memberikan tiga pilihan, yaitu ala Kompi Ajaib, dan Dua lagi dari DTE langsung saja to the point :))

1. Ala Kompi Ajaib :)

Login ke blogger dan ke edit HTML.

Cari kode ]]></b:skin> atau </stytle>
Dan letakkan kode ini di atasnya :
.PopularPosts .widget-content ul{margin-top:-7px;padding:7px !important;list-style-type:none;} .PopularPosts .widget-content ul li{position:relative;padding:10px !important;width:100%;margin-bottom:1px} .PopularPosts .widget-content ul li:nth-child(1){background:#444} .PopularPosts .widget-content ul li:nth-child(2){background:#555} .PopularPosts .widget-content ul li:nth-child(3){background:#666} .PopularPosts .widget-content ul li:nth-child(4){background:#777} .PopularPosts .widget-content ul li:nth-child(5){background:#888} .PopularPosts .widget-content ul li:nth-child(6){background:#999} .PopularPosts .widget-content ul li:nth-child(7){background:#aaa} .PopularPosts .widget-content ul li:nth-child(8){background:#bbb} .PopularPosts .widget-content ul li:nth-child(9){background:#c1c1c1} .PopularPosts .widget-content ul li:nth-child(10){background:#ccc} .PopularPosts .widget-content ul li a{color:white;text-decoration:none;} .PopularPosts .widget-content ul li a:hover{color:#20c1ea;}
Untuk menambah title tag silahkan cari kode :
<!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a>
Ganti dengan kode :
<!-- (1) No snippet/thumbnail --> <a expr:href="data:post.href" expr:title="data:post.title" href=""><data:post .title=""></data:post></a>
Simpan dan lihat hasilnya :)

DEMO

2. Dengan Thumbnail dan Berwarna V.1
Cari kode ]]></b:skin> atau </stytle>
Letakkan kode ini di atasnya :
/* Custom CSS for Blogger Popular Post Widget */ .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:1%} .PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%} .PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%} .PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%} .PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%} .PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%} .PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%} .PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%} .PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%} .PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}
Simpan dan Lihat hasilnya :)

2. Ber thumbnail dan berwarna v.2
Cari kode ]]></b:skin> atau </stytle>
Letakkan kode ini di atasnya :
.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 { width:810px; margin:.5em 0; list-style:none; font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif; color:black; counter-reset:num; overflow:hidden; } .PopularPosts ul li img { display:block; margin:0 .5em 0 0; width:50px; height:50px; float:left; } .PopularPosts ul li { background-color:#eee; padding:6px 6px; counter-increment:num; position:relative; float:left; width:150px; height:100px; -webkit-box-shadow:-1px -1px 10px rgba(0,0,0,.7); -moz-box-shadow:-1px -1px 10px rgba(0,0,0,.7); box-shadow:-1px -1px 10px rgba(0,0,0,.7); } .PopularPosts ul li .item-snippet {display:none} .PopularPosts ul li:before, .PopularPosts ul li .item-title a { font-weight:bold; font-size:100%; 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; right:0; bottom:0; } /* Set color & level */ .PopularPosts ul li:nth-child(1) {background-color:#E11E28} .PopularPosts ul li:nth-child(2) {background-color:#FD3C03} .PopularPosts ul li:nth-child(3) {background-color:#FECB09} .PopularPosts ul li:nth-child(4) {background-color:#6EBE27} .PopularPosts ul li:nth-child(5) {background-color:#149A48} .PopularPosts ul li:nth-child(6) {background-color:#5BBFF1} .PopularPosts ul li:nth-child(7) {background-color:#61469C} .PopularPosts ul li:nth-child(8) {background-color:#863E86} .PopularPosts ul li:nth-child(9) {background-color:#863E62} .PopularPosts ul li:nth-child(10) {background-color:#815540}
Simpan dan lihat hasilnya :)

http://www.kompiajaib.com/2014/01/modifikasi-popular-post-sederhana-tanpa.html
http://www.dte.web.id/2013/02/colorful-popular-post-widget.html

Sekian. Kalau ada yang kurang faham bisa di tanyakan di komentar :)