Sedikit Info Seputar
Cara Membuat Widget Popular Post Warna-Warni
Terbaru 2017
- Hay gaes kali ini team Android Apps For Free, kali ini akan membahas artikel dengan judul Cara Membuat Widget Popular Post Warna-Warni, kami selaku Team Android Apps For Free telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Apps For Free. semoga isi postingan tentang
Artikel Tutorial Blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Cara Membuat Widget Popular Post Warna-Warni
Terbaru
link: Cara Membuat Widget Popular Post Warna-Warni
Berbagi Cara Membuat Widget Popular Post Warna-Warni Terbaru dan Terlengkap 2017
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
