Cara Mengganti Tampilan Popular Post Keren

Nehandnews.com - Cara Mengganti Tampilan Popular Post Keren, Selamat sore sobat nehandnews, pada kesempatan sore ini saya akan membuat artikel mengenai Cara Mengganti Tampilan Popular Post , yang dimana tampilan popular post akan terlihat keren seperti popular post warna warni yang berada di sebelah kanan blog nehandnews.com ini . Nah buat sobat semua yang berkeinginan untuk memasang Popular Post Keren seperti screenshot dibawah ini, berikut Cara Membuat Tampilan Popular Post Keren :

Cara Mengganti Tampilan Popular Post Keren

- Pertama pastikan widget popular post diblog sobat hanya menampilkan thumbnail dan judul saja,seprti gambar di bawah :

Cara Mengganti Tampilan Popular Post Keren

Setelah itu seperti biasa sobat masuk ke Editor HTML Template, kemudian cari kode ]]></b:skin> atau </style> , Untuk pencarian lebih cepat ketik CTRL+F pada keyboard, dan paste kode dibawah ini tepat di atas kode ]]></b:skin>

/* 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 & 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%}

Terakhir klik Save Template.