Membuat Popular Post Keren Ala Kompi Ajaib

Membuat Popular Post Keren Ala Kompi Ajaib - Tadi setelah blogwalking ke kompi ajaib saya menemukan tutorial mengenai modifikasi popular post Sederhana Tanpa Thumbnails yang disertai title di link-nya . mungkin tutorial ini merupakan request dari pengunjung kompi ajaib yang meminta untuk membuat widget popular post yang digunakan oleh kompi ajaib .

Berikut Cara Membuat Popular Post Keren Ala Kompi Ajaib :

1. Pertama sobat harus sudah memasang widget popular postnya
2. Setelah anda sudah memasang widget popular postnya kemudian sobat copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </stytle>

.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;}

Bila sobat ingin merubah warna background pada tiap itemnya, silahkan ganti background pada kode .PopularPosts .widget-content ul li:nth-child(1) - (10)

Sebetulnya sampai , popular post ala kompi ajaib sudah jadi . tapi jika anda ingin menambahkan title di link popular post tersebut maka anda cari dulu

<!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>

Ganti kode di atas dengan kode dibawah ini

<!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>

Simpan Template dan lihat hasilnya

Note :
Jangan lupa setiap anda menambahkan widget baru hapus lah kode <b:include name='quickedit'/> , supaya blog anda tetap valid . :)

Resource : http://www.kompiajaib.com/2014/01/modifikasi-popular-post-sederhana-tanpa.html