Membuat Popular post Keren Warna Warni Gampang Banget

Cara Membuat Popular post Keren Warna Warni - Tahun 2015 mungkin akan mengawali persaingan yang semakin ketat di dunia per blog an,, hehe maka kita harus senantiasa berlomba lomba mempercantik blog kita masing2 , tujuanya adalah untuk menarik minat pengunjung, sehingga blog kita nantinya di harapkan akan semakin ramai,, oke kan,,

nagh salah satu trik atau tips mempercantik tampilan blog adalah dengan memberikan polesan warna warni pada widget popular post,, untuk menarik pengunjung yang datang melirik apa2 saja siyh konten yang paling favorit di blog kita ini,, nagh setelah pengunjung tertarik akan daya tarik full colour popular post yang cantik nan indah ini maka singkat cerita di klik lah artikel2 atau konten yang ada pada daftar popular post,, dan hasilnya otomatis menambah bounce rate pada blog kita.. yang berarti pula akan memperbaiki dan meningkatkan rangking kita di mata google,, mudah2an aamiin,,

nagh daripada gak sabar mending hayuk di lihat saja tutorialnya,, kalau suka monggo di ikuti,, kalau enggak saya tawari popular post lain yang lebih keren mudah2an pada gak nolak kalau mau mempertimbangkan silahkan buka

kalau sudah mempertimbangkan ya udah kita simak tutorial yang popular post keren berwarna warni cantik kayak pelangi ini

Widget popular post kali ini adalah popular post colorfull dengan penomoran. Cara Membuatnya pun cukup mudah. Berikut tutorial cara membuat popular post pada blog colorful disertai nomor:

1. Log in ke akun blogger sobat
2. Klik template dan edit HTML
3. Cari kode berikut ]]></b:skin> setelah ketemu tempatkan kode berikut ini tepat diatas kode tadi yang saya sebutkan.

.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;
}

/* Set color & level */
.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%}

4. Klik pratinjau lalu klik simpan.

Nagh gimana gaes, gampang banget kan?? yoyoi pastinya,, ambyaberbagi.com selalu memberikan tutorial yang gampang2 aja kok bos,, gak ada yang sulit,, lha wong saya sendiri aja masih pemula hehe jadi nyari ilmu yang gampang2 dulu,, lalu di share biar pada tahu deeh temen2,,
okeh gaes terimakasih atas partisipasinya,, dan udah nyempetin baca Membuat Popular post Keren Warna Warni Gampang Banget jangan bosan berkunjung ke ambyaberbagi.com yaa hehe have nice daaay,,