Cara Membuat Popular Post Full Blue Color

Assalamu'alaikum Wr. Wb. sobat Fakhrie.

Kali ini saya akan memberikan Tutorial Cara Membuat Popular Post Full Blue Color. Sesuai namanya, tampilan popular post ini berwarna biru. Namun, Saya mendesignnya dengan paduan warna gradien dalam pola warna biru. Sebenarnya Tampilan ini hanya redesign dari tampilan popular post seperti pada template Evo Magz Gimana penampakkannya ? Ini penampakkannya.

Oke, langsung saja ke cara membuatnya. Ikuti langkah-langkahnya :

Langkah Pertama : Login Blogger

Langkah Kedua : Pilih Blog

Langkah Ketiga : Masuk tab Template

Langkah Keempat : Klik Edit HTML

Langkah Kelima : Cari kode ]]></b:skin>

Langkah Keenam : Copy kode dibawah ini

/* 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;
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 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
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;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#0000CE;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#5B5BFF;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#7373FF;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#8282FF;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#9191FF;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#A8A8FF;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#B7B7FF;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#C6C6FF;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#DBDBFF;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#EEEEFF;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}

Langkah Ketujuh : Letakkan kode tersebut tepat diatas kode ]]></b:skin>
Langkah Kedelapan : Simpan

Semoga bermanfaat bagi sobat sekalian~