Membuat popular post berwarna

Jika anda bosan dengan tampilan popular post di blog anda, sebaiknya anda modif saja widget popular post menjadi berwarna, seperti contoh gambar di bawah ini.

Berikut cara membuat popular post di blog anda menjadi berwarna-warni.

1.Login di blogger.com.

2.Klik Tata letak, Edit pada bagian gadget popular post, matikan thumbnail post, lalu simpan.

4.Klik Tema, Edit HTML.

5.Copy kode CSS berikut ini

#PopularPosts1 ul li a:hover {

color:#fff;

text-decoration:none

}

#PopularPosts1 ul li a {

-webkit-text-size-adjust:auto;

-webkit-text-stroke-width:0;

color:#333;

display:block;

font-family:Georgia,'Times New Roman',Times,serif;

font-size:13px;

font-style:normal;

font-variant:normal;

font-weight:400;

letter-spacing:normal;

line-height:18px;

margin:0 40px 0 0;

min-height:30px;

orphans:2;

padding:0;

text-align:-webkit-auto;

text-decoration:none!important;

text-indent:0;

text-transform:none;

white-space:normal;

widows:2;

word-spacing:0

}

#PopularPosts1 ul li .item-thumbnail {

float:left;

border:0;

margin-right:10px;

background:transparent;

padding:0;

width:51px;

height:51px

}

#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after {

position:absolute;

top:10px;

right:5px;

border-radius:50%;

border:2px solid #ccc;

background:#353535;

-webkit-box-shadow:0 0 5px #000;

-moz-box-shadow:0 0 5px #000;

width:30px;

height:30px;

line-height:1em;

text-align:center;

font-size:28px;

color:#fff

}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {

background:#DF01D7;

width:90%

}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after {

content:"8"

}

6.Letakkan kode CSS tersebut diatas kode

]]></b:skin>

7.Simpan.

Demikianlah cara membuat popular post berwarna, semoga bermanfaat.