Membuat Popular Post Berwarna

H

ello guys , 

Today, I'm gonna to share "New Multi colored - Numbered Popular  Post Widget for Blogger". Popular post widget very important widget for blogger users so this widget make more attractive and user friendly. Users need to easy navigate to good articles and read much more so this feature very use full. So lets check out this widget, Cekidot →

          

     

• Buka Blog kamu
• Pilih Menu Tata Letak

• Add Widget

• Pilih Menu Popular Post

 Setelah menambahkan widget popular post, kamu buka blog kamu (DASHBOARD)

• Pilih Menu Template
• EDIT HTML

• CTRL+F untuk mencari kata ]]></b:skin>

• Copy Code dibawah ini, letakkan diatas kode tadi

/* Multi colored - Numbered Popular  Post Widget By Digitalhubinc.com */

#PopularPosts4 ul li:hover{

background-color: #ffffff;

}

#PopularPosts1 ul li{border-bottom:2px dotted #999999;}

#PopularPosts1 ul li .item-thumbnail{-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

}

#PopularPosts1 ul li .item-thumbnail:hover{

-webkit-transform: rotate(-17deg);

-moz-transform: rotate(-17deg);

-o-transform: rotate(-17deg);

}

#PopularPosts1 ul li .item-title {color:#fff;}

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border-bottom:1px dashed #ffffff;padding:10px}

#PopularPosts1 ul li:first-child{background:#eb1f0a;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#0ddb25;width:90%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#0d6edb;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#eeac0f;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#7d0fee;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li + li{background:#e30d31;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#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{position:absolute;top:20px;right:-15px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi08UjoDaDG4JfudYGkFB4zsKd-IfGc5JzfyrnEnBukGc-ZHHZidB8oWbxlgtRiNtCZTcLgvGwgloDp_BcZd2pQVkbmhl83qYig9NiN0Rly8YX8NIkDuSriO1eH7CKlrD_h7K4Uev_PB_Q8/s1600/waved-circle.png) no-repeat; width:32px;height:32px;text-align:center;font-size:15px; padding-top:13px; font-weight: bold; color:#ffffff;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px; border-radius: 5px; border: 2px solid #ffffff;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);}

#PopularPosts1 ul li a{font-size:12px;color:#fff;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#e3dede;text-decoration:none}

#PopularPosts1 {

margin-left: 20px;

}

#PopularPosts1 h2 {color:white;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKFaUURqo9KUkviJD0PA_S5VeUIiOLFyB9e_zBcunlOf7eCCqIzRmwJ3jSUx6wJc7RF6vhDkxcuph8ipb4D_cZWIKpzQK4sTWdHnwp_Zlc3uM7vccDXGcViDhEM1HHCIF4t89pg_UpIKnK/s1600/layer2.png) no-repeat;

height:30px;

width: 287px;

margin-left:-5px;

padding-top:10px;

font-size:18px;

text-align: center;

}

•  Save yaaa.

I hope everyone enjoyed this post and feel free to use in your blog and spread within your friends. Please like and drop your valuable comments below.

Artikel Terkait

Luangin waktumu untuk Share this article with your friends

• Facebook
• Twitter
• Google+
• Pinterest
• Dig
• LinkedIn