Cara Membuat dan Memasang Popular Post Keren Warna-Warni - udah lama Ermawati tidak share mengenai tutorial blog. Nah pada postingan kali ini Ermawati akan berbagi untuk anda semua mengenai widget popular post yang sangat keren dengan aneka warna dan nomor. Seperti anda ketahui kalau Popular post ini menunjukkan kalau artikel atau postingan kita yang paling banyak dilihat oleh pengunjung blog. Nah untuk screenshot dari widget popular post berwarna-warni yang keren seperti terlihat pada gambar dibawah ini dan blog Ermawati juga memakainya di sidebar kanan.
Cara Membuat Popular Post Dengan Aneka Warna :
1. Buka Blogger dan masuk dengan akun anda
2. Pilih Template => Edit HTML
3. Tekan ctrl + F, cari kode ]]></b:skin>
4. Letakkan kode dibawah ini diatasnya
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}
/*Custom Popular Post*/
.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;}
5. Simpan
Demikianlah cara membuat popular post berwarna-warni, silahkan anda coba dan semoga bermanfaat.
