Cara Membuat Widget Popular Post Full Color

Dalam template widget yang satu ini sangat penting dalam meningkatkan trafik blog, iya namanya Popular Post atau postingan terpopuler. Jika anda bisa membuatnya lebih menarik pengunjung akan tertarik melihatnya apalagi dengan warna yang berbeda atau penuh warna.


Ikuti langkah - langkah dibawah ini.

Langkah 1 : Tambahkan code di bawah ini di atas code ]]></b:skin> atau </style> 


/* Widget Popularposts*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{
margin:0;
padding:0;
list-style:none;
border:none;
background:none;
outline:none
}
.PopularPosts ul{
margin:0;
list-style:none;
color:black;
counter-reset:num
}
.PopularPosts ul li{
background-color:#eee;
margin:0 0 0 0!important;
padding:.5em 1.5em .5em .5em!important;
counter-increment:num;
position:relative
}
.item-thumbnail img{float:left;margin:0 10px 0 0}
.PopularPosts a{
color:#fff!important
}
.PopularPosts a:hover{
background:#7f8c8d;
color:#ddd!important
}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{
font-weight:bold;
color:inherit;
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;
bottom:0;
right:0;
padding-right:0!important
}
.PopularPosts ul li:nth-child(1){
background-color:#f1c40f
}
.PopularPosts ul li:nth-child(2){
background-color:#f39c12
}
.PopularPosts ul li:nth-child(3){
background-color:#2ecc71;
}
.PopularPosts ul li:nth-child(4){
background-color:#27ae60;
}
.PopularPosts ul li:nth-child(5){
background-color:#e67e22;
}
.PopularPosts ul li:nth-child(6){
background-color:#d35400;
}
.PopularPosts ul li:nth-child(7){
background-color:#3498db;
}
.PopularPosts ul li:nth-child(8){
background-color:#2980b9;
}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;
}
.PopularPosts ul li:nth-child(10){
background-color:#c0392b;
}
.PopularPosts a:hover{
background:#7f8c8d;
color:#ddd!important

Langkah 2 : Konfigurasi Popular post,silahkan ke tata letak atau layout dan edit pada widget popular post


itulah Cara Membuat Widget Popular Post Full Color Semoga Bermanfaat.
Comments

3 comments:

Related posts
Guestbook
Other
OrnoX (remake) design by Dark Ard | All rights is reversed.
  • Post
  • Comments
  • Related
  • Guestbook
  • Author
  • Other
6:34