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

Masukan Email Anda Untuk Mendapatkan Update

Translate

Sedikit Motivasi

Tak selalu orang terpintar yang mendapatkan yang terbaik; orang yang mempunyai kegigihan membaca, orang yang terus bertahan dan tak pernah menyerahlah yang mencapai sukses.

Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN" - See more at: http://blogjomblongenes.blogspot.com/#sthash.UYtxUzZP.dpuf
Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN"
Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN" - See more at: http://blogjomblongenes.blogspot.com/#sthash.UYtxUzZP.dpuf
Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN" - See more at: http://blogjomblongenes.blogspot.com/#sthash.UYtxUzZP.dpuf
Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN" - See more at: http://blogjomblongenes.blogspot.com/#sthash.UYtxUzZP.dpuf

Total Pageviews

Judul Widget 35

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