Cara Membuat Popular Post Keren Berwarna

Cara Membuat Popular Post Keren Berwarna - Hallo sobat Tut-Blogger.. Bagaimana perkembangan blog kalian apakah makin hari makin baik ? Kali ini saya akan membuat sebuah tutorial yang mungkin banyak di cari para blogger. Yap, cara membuat popular post keren dan juga berwarna-warni. Kali ini saya akan memberikan tutorialnya seperti template Sang SEO dan Cargam Tuksense. Siapa yang tidak tau tentang template Sang SEO dan Cargam Tuksense yang di redesign dari Template Johny Wuzz .

Cara Membuat Popular Post Keren Berwarna itu sangat-sangat mudah sekali, kalian hanya perlu menambahkan beberapa script css di bawah ke template kalian. Yuk kita mulai saja cara membuat popular post.

Cara Membuat Popular Post Keren Berwarna

1. Pertama kali yang harus anda lakukan adalah login terlebih dahulu ke Blogger.

2. Kemudian, setelah login kalian pilih Layout dan tambahkan widget Popular Post. Ini penting loh.. kalai kalian melewatkan cara no 2 ini pastinya akan gagal karena tidak ada popular postnya.

3. 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 eyboard.

4. Setelah ketemu tambahkan beberapa script di bawah ini di atasnya.

Berikut ini adalah Model Popular Post Post Keren Berwarna :

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}

.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}

.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}

.PopularPosts ul li a{color:#fff!important}

.PopularPosts ul li a:hover{color:#2c3e50!important}

.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}

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

.PopularPosts ul li:nth-child(2){background-color:#f39c12;}

.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}

.PopularPosts ul li:nth-child(4){background-color:#27ae60;}

.PopularPosts ul li:nth-child(5){background-color:#e67e22;}

.PopularPosts ul li:nth-child(6){background-color:#d35400;}

.PopularPosts ul li:nth-child(7){background-color:#3498db;}

.PopularPosts ul li:nth-child(8){background-color:#2980b9;}

.PopularPosts ul li:nth-child(9){background-color:#ea6153;}

.PopularPosts ul li:nth-child(10){background-color:#c0392b;}

.PopularPosts .item-thumbnail{margin:0 0 0 0}

.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}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.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;}
.PopularPosts ul li:nth-child(2){background-color:#222;}
.PopularPosts ul li:nth-child(3){background-color:#333;}
.PopularPosts ul li:nth-child(4){background-color:#444;}
.PopularPosts ul li:nth-child(5){background-color:#555;}
.PopularPosts ul li:nth-child(6){background-color:#666;}
.PopularPosts ul li:nth-child(7){background-color:#777;}
.PopularPosts ul li:nth-child(8){background-color:#888;}
.PopularPosts ul li:nth-child(9){background-color:#999;}
.PopularPosts ul li:nth-child(10){background-color:#aaa;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px} 

Bagaimana sobat Tut-Blogger ? Bagus sekali kan... Itulah beberapa cara yang bisa saya bagikan di Cara Membuat Popular Post Keren Berwarna