Cara Membuat Widget Popular Post Terbaru
Sebagai langkah awal sobat adalah:
- Login ke blogger >> masuk ke Tata Letak/Dashboard >> Pilih Layout/Template >> Pilih Tambahkan Gadget/Add a Gadget >> Pilih Popular Post/Entri Populer.
- Kemudian Sesuaikan Pengaturan sesuai keinginan sobat seperti pada gambar di bawah ini.
Cara Membuat Widget Popular Post Warna Warni
Selanjutnya kita akan mewarnai Widget Popular tadi menjadi indah.
- Masuk Ke Editor Template caranya: Dashboard Blogger >> Template >> Edit HTML.
- Cari Kode ]]></b:skin> atau </style>. Agar mudah, gunakan ctrl+f (klik dulu didalam box template editor).
- Paste kode css berikut ini diatas kode ]]></b:skin> atau </style> (kemungkinan besar pada template obat sudah ada css popular post, cari .popularpost dan paste/ganti dengan kode di bawah ini:
/* Popular Post By FaridAlamri.blogspot.com */
.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 10% .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:normal;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed
}
.widget-content ul li:last-child{border-bottom:medium none !important
}
.widget-content ul li a{color:#333
}
.widget-content ul li a:hover{color:#C80441
}
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00
}
- Tulisan Berwarna Merah itu ganti dengan kode warna yang sobat inginkan
- Tulisan Berwarna Hijau Untuk Mengganti Margin
- Simpan Template nya dan lihatlah hasilnya.
Bagaimana apa sobat sudah bisa membuatnya ? pasti bisa gak mungkinlah gak bisa,
sekian untuk postingan mengenai Cara Membuat Widget Popular Post Warna Warni di blog.
Terimah kasih sudah mau percayai tutorial yang ada di blog ini.
Sumber: WebKeren.Com