Membuat Popular Post Berwarna

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

Born This Way

Jumat, 09 Mei 2014

Membuat Popular Post Berwarna

0 komentar:

Posting Komentar

Archive