TUTORIAL MEMBUAT KOLOM POPULAR POST BERWARNA

Inilah Penampakan Popular Post warna warni
Jangan hiraukan postingannya ya..

Nah, gimana tertarik atau tidak? kalau sobat tertarik, sobat bisa membuatnya sendiri kok..
Kami berikan tips trik serta tutorial cara membuat popular post warna warni ini..
Jika belum memasang Popular Post di blog sobat silahkan pasang dulu. Sobat bisa baca artikel ini
Cara Memasang Widget Popular Post Di Blog Blogspot

Oke berikut ini langkah-langkah yang harus sobat lalui

Cara Membuat Widget Popular Post Berwarna

• Silahkan Sobat Login ke Blogger dan Masuk ke Dashboard Blog
• Pilih Tab Template
• Silahkan Klik Edit Template
• Cari kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian
• Setelah ketemu kode ]]></b:skin>  silahkan sobat copas kode dibawah ini dan letakkan di atas kode  ]]></b:skin> tadi

Klik Show untuk membuka

/* 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;
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 0 0.4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
font-family:arial, sans-serif !important;
font-size:12px;
font-weight:bold !important;
display:block;
position:absolute;
top:-3px;
right:-3px;
border-radius:12px;
background-color:#333;
color:#fff !important;
width:24px;
height:24px;
line-height:24px;
text-align:center;
padding-right:0px !important;
box-shadow: -1px 1px 0px #fff;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;
}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;
}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;
}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;
}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;
}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;
}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;
}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;
}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;
}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;
}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}

• Langkah terakhir klik Simpan Template

Setelah mengikuti tahap-tahap di atas maka popular post sobat akan terlihat seperti blog ini...

Popular post atau entri populer akan terlihat lebih cetar membahana.. heheh

Sekian artikel ini terima kasih...

Posted by Unknown

Tweet