[Bulan Puasa] Cara Membuat Popular Post Warna Warni Dengan Gambar

baca98.blogspot.com - Hi sobat, artikel ni merupakan artikel lanjutan dari artikel yg kemarin Cara Memasang Widget Popular Post di Blog Blogspot hanya saja kali ni popular post yg sudah terpasang akan kita buat jadi warna warni seperti apa jadinya?
Sobat bisa lihat gambar dibawah ini

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

Nah, gimana tertarik / 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 ni langkah-langkah yg 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 untk memudahkan pencarian
• Setelah ketemu kode ]]></b:skin> silahkan sobat copas kode dibawah ni dan letakkan di atas kode ]]></b:skin> tadi

Klik Show untk 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 / entri populer akan terlihat lebih cetar membahana.. heheh Sekian artikel ni terima kasih...

source : http://reddit.com, http://tribunnews.com

Posted by Unknown