Cara Membuat Widget Popular Post Warna Warni di Blog

Cara Membuat Widget Popular Post Warna-Warni di Blog | Sobat pasti pernah melihat pada beberapa template terdapat popular post warna-warni dan juga bernomor. Kali ini WebKeren akan membahas cara modifikasi widget popular post blogger menjadi warna - warni yang keren bangetz. Kalau sobat belum pernah melihatnya, berikut penampilannya.
Cara Membuat Widget Popular Post Warna Warni di Blog
Contoh Popular Post warna-warni

Jika sobat menggunakan template bawaan blogger ataupun template custom namun dengan popular post biasa, sobat bisa menambahkan CSS berikut ini dengan mudah, gampang, dan cepat yang membuat popular post menjadi berwarna-warni.

Cara Menambahkan Widget Popular Post Terbaru

Tentunya sebagai langkah awal, sobat harus memasang widget poular post. Caranya, Login Blogger > masuk ke dashboard >> pilih Layout >> Add a Gadget >> pilih Popular Post. Sesuaikan pengaturannya dengan gambar berikut.
Widget Popular Post Warna Warni
Pengaturan Popular Post Warna-Warni

Cara Membuat Widget Popular Post Warna-Warni

  1. Setelah Menambahkan popular post, sekarang kita akan membuatnya menjadi berwarna-warni. caranya:
  2. Masuk ke editor template. caranya: Dashboard Blogger > Template > pilih EDIT HTML.
  3. Cari  kode ]]></b:skin> atau </style>. Agar mudah, gunakan ctrl+f (klik dulu didalam box template editor).
  4. 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 ini)
/* Popular Post */
.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
}
Sobat bisa merubah warna (ganti kode berwarna merah) ataupun marginnya (ganti kode berwarna biru) sesuai keinginan.

5. Simpan template, kemudian lihat hasilnya.


Demikian Tutorial WebKeren mengenai Cara Membuat Widget Popular Post Warna Warni di Blog. Kalau sobat punya pendapat, mau berbagi cerita keberhasilan ataupun kegagalan menerapkan, menanyakan sesuatu, ataupun sekedar berbagi unek-unek? Silakan tulis di kolom komentar di bawah. Semoga bemanfaat untuk kita semua.

referensi:
mas-sugeng.com
evomagzblog.blogspot.com
Artikel Terkait:

Follow Twitter, Facebook untuk mendapat update Artikel Keren Terbaik Terbaru. Atau Subscribe untuk menerima artikel terbaru gratis di Inbox email Sobat:

6 Responses to "Cara Membuat Widget Popular Post Warna Warni di Blog"

  1. Makasih gan untuk informasi tutornya :)
    http://goo.gl/yQnQ3T

    ReplyDelete
  2. Makasih bro udah berhasil. bisa dicek di blogku, sekalian berkunjung gih. thanks
    cekapetewe.blogspot.com

    ReplyDelete
  3. sama-sama mas budi. tambah keren blognya :D

    ReplyDelete
  4. Mantapp gan Artikelnya :) sngat bermanfaat :)

    ReplyDelete
  5. terimakasih informasinya sangat membantu :)
    http://bit.ly/1GMl8RA

    ReplyDelete
  6. Wuih muantap popular postnya, jadi pingin coba praktekkan

    ReplyDelete

Komen juga dong sob., jangan lupa dicentang di bagian notify supaya kalau dibalas dapat notifikasi