Membuat Post Populer Warna Warni Di Blog

Selamat siang masih dalam rangka desain blog,kali ini kita akan berbagi tentang Membuat Post Populer Warna Warni Di Blog,apa itu populer post ? populer post adalah sebuah post yang banyak di lihat oleh pengunjung,maka dari itu untuk lebih menarik kita pasang dengan warna-warni.

Memanfaatkan css pseudo element,semoga saja dengan tampilan widget warna warni akan lebih menarik dan enak di pandang,caranya gampang terus ikuti kebawah dan ikuti langkah langkahnya sambil siapkan kopi dan roko,,hehehehe.

pertama anda copy kode berikut ini :

/* Custom CSS for Blogger Popular Post Widget */
.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%}

ukuran sesuaikan saja sendiri lihat gambar : post populerKalau sudah di copy simpan dulu di notepad.Setelah itu log in ke blogger,biasa menggunakan akun gmail anda,setelah itu Klik Tata Letak > Klik Tambahkan Gadget > Klik Entri Populer,contoh Lihat Gambar :

Pengaturan Popular Post warna warniLalu Klik Simpan > Lihat Blog.

nah kalau sudah kembali ke template

Buka Template >Klik Edit HTML >

terus Copy kode css yang di notepad tadi lalu >

Cari Kode Ini (biasanya dengan CTRL F) ]]></b:skin>

kalau sudah ketemu > Simpan kode css tadi Tepat di atasnya

lalu Klik Simpan Template.

Gampang kan ? kalau masih tidak bisa tanya mang darno wiwiex.uehehehehe

Iklan

Komentari

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s