Pada tutorial blog kali ini saya akan share mengenai Widget Popular Post yang akan dirubah atau dimodifikasi menjadi warna-warni . Untuk m...
Pada tutorial blog kali ini saya akan share mengenai Widget Popular Post yang akan dirubah atau dimodifikasi menjadi warna-warni. Untuk merubah / membuat widget popular post ini tentunya terlebih dahulu blog anda harus dipasang widget popular post dan kalau sudah dipasang maka akan dimodifikasi menjadi berwarna-warni dengan tambahan kode CSS dan pastinya tidak akan memberatkan loading blog. Nah penampilan dari popular post yang sudah dirubah berwarna seperti dibawah ini.
Cara Membuat Widget Popular Post Warna-Warni :
1. Buka blog anda
2. Pilih Template => Edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut ini diatasnya
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}
.PopularPosts ul li:nth-child(1) {background-color:#129700;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#0000FF;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FFA200;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#B300FF;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#FF00F2;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#B70000;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#00B795;margin-right:7%}
4. Selesai, simpan
Keterangan :
Silahkan anda rubah warna pink sesuai keinginan anda
Demikianlah Cara Membuat Widget Popular Post Warna-Warni, silahkan dicoba supaya blog anda terlihat lebih menarik, semoga bermanfaat.
