Cara Membuat Popular Post Keren Berwarna

Cara Membuat Popular Post Keren Berwarna. Hanya perlu menambahkan beberapa script css di bawah ke template kalian. Oke langsung ajah. Ini tutorialnya:

Login terlebih dahulu ke Blogger.
Kemudian, setelah login kalian pilih Layout dan tambahkan widget Popular Post. Ini penting loh.. kalau kalian melewatkan cara no 2 ini pastinya akan gagal karena tidak ada popular postnya.
Setelah selai menambahkan widget, kalian klik template > edit template . Didalam template kalian cari ]]></b:skin> atau </style> . Kalian dapat mencarinya dengan mudah dengan menekan tombol CTRL + F di keyboard.
Setelah ketemu tambahkan beberapa script di bawah ini di atasnya.

Model 1
Sang SEO Responsive Blogger
Template terlihat lebih Renggang

/*Custom Popular Post*/

.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}<br />
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}<br />
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}<br />
.PopularPosts ul li a{color:#fff!important}<br />
.PopularPosts ul li a:hover{color:#2c3e50!important}<br />
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}<br />
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}

/* Pengaturan Warna */

.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}<br />
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}<br />
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}<br />
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}<br />
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}<br />
.PopularPosts ul li:nth-child(6){background-color:#d35400;}<br />
.PopularPosts ul li:nth-child(7){background-color:#3498db;}<br />
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}<br />
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}<br />
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}<br />
.PopularPosts .item-thumbnail{margin:0 0 0 0}<br />
.PopularPosts .item-snippet{font-size:11px}

Model 2
Cargam Tuksense Blogger
Template terlihat lebih Kecil dan Berwarna Gelap

/*Custom Popular Post*/

.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}<br />
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}<br />
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}<br />
.PopularPosts ul li a{color:#fff!important}<br />
.PopularPosts ul li a:hover{color:#2c3e50!important}<br />
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}<br />
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}

/* Pengaturan Warna */

.PopularPosts ul li:nth-child(1){background-color:#111;}<br />
.PopularPosts ul li:nth-child(2){background-color:#222;}<br />
.PopularPosts ul li:nth-child(3){background-color:#333;}<br />
.PopularPosts ul li:nth-child(4){background-color:#444;}<br />
.PopularPosts ul li:nth-child(5){background-color:#555;}<br />
.PopularPosts ul li:nth-child(6){background-color:#666;}<br />
.PopularPosts ul li:nth-child(7){background-color:#777;}<br />
.PopularPosts ul li:nth-child(8){background-color:#888;}<br />
.PopularPosts ul li:nth-child(9){background-color:#999;}<br />
.PopularPosts ul li:nth-child(10){background-color:#aaa;}<br />
.PopularPosts .item-thumbnail{margin:0 0 0 0}<br />
.PopularPosts .item-snippet{font-size:11px}

Selesai.
sumber: http://tut-blogger.blogspot.com/