Widget popular post merupakan salah satu widget penting di blog. Widget ini berfungsi untuk menampilkan beberapa postingan yang sering dikunjungi oleh pengunjung blog. Jadi, pengunjung bisa tau postingan apa yang sedang hot/populer di blog sobat.
Beberapa minggu kemarin, saya telah membagikan Cara Membuat Widget Label Cloud Blog Menjadi Warna - Warni. Nah, supaya blog sobat lebih colorfull kali ini saya akan membagikan tutorial mendesain widget popular post supaya lebih keren dengan membuatnya menjadi warna-warni. Yuk, disimak!
Cara Membuat Widget Popular Post Menjadi Warna Warni di Blogger
Langkah Pertama: Memasang Widget Popular Post di Blog
- Buka dashbor blogger, lalu pergi ke menu Tata Letak
- Klik Tambahkan Gadget, lalu pilih widget Entri Populer/Popular Post
- Silahkan konfigurasikan widget popular post sobat, sesuai selera masing-masing. Jika sudah selesai, klik simpan.
Langkah Kedua: Menambahkan CSS di Blog
- Buka dashbor blogger, lalu pergi ke menu Tema
- Klik Edit HTML
- Cari kode ]]></b:skin> atau kode </style> (Supaya lebih mudah tekan Ctrl+F)
- Masukkan kode CSS ini, diatas kode tadi
.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 0 !important; padding:10px 20px 10px 10px !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 .widget-content ul li { list-style-type: none; } .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:#EF4836; } .PopularPosts ul li:nth-child(5) {background-color:#FF9201; } .PopularPosts ul li:nth-child(6) {background-color:#FDCB01; } .PopularPosts ul li:nth-child(7) {background-color:#DEDB00; } .PopularPosts ul li:nth-child(8) {background-color:#89C237; } .PopularPosts ul li:nth-child(9) {background-color:#44CCF2; } .PopularPosts ul li:nth-child(10) {background-color:#01ACE2; } .PopularPosts .item-thumbnail { margin:0 0 0 0; } .PopularPosts .item-snippet { font-size:11px; }Keterangan :
- Kode yang berwarna biru adalah warna popular post. Jadi, jika sobat kurang suka dengan warnanya silahkan ganti sesuai dengan selera sobat. Untuk kode warna, bisa dilihat disini
- Terakhir, klik Simpan.
Cukup mudah bukan?
Sekian dulu artikel dari saya kali ini. Jangan lupa follow Blog Mas Aldi untuk mendapatkan update artikel keren lainnya. Semoga bermanfaat.
pas baget yg di cari akhirnya nemu juga, kangsung di coba
BalasHapusMonggo dicoba..
Hapuswidget populer post nya jadi makin keren nih :D, tapi ane kurang suka ama warna warni gan, request warna flat dung bershadow , dan lainya :D
BalasHapusWarna flat bisa dilihat disini : http://www.aldi.web.id/p/flat-ui-color-generator.html
Hapusmantab, berguna sekali artikelnya. thanks gan!
BalasHapusSama sama..
HapusPas banget , mau bikin widget ah
BalasHapusSilahkan..
Hapusmenurut saya yg css yg simple aja gan. biar gk lemot.
BalasHapusCSS tidak terlalu mempengaruhi kecepatan blog gan..
Hapusmantap gan. izin nyoba kyaknya bgus tu..
BalasHapusSilahkan gan..
Hapuswahhh kerennn :D
BalasHapusHehehe..
HapusSaya copy script nya gan.
BalasHapusSilahkan..
Hapuskalau ingin membuat widget popular mengikuti ke bawah dan ke atas ke tika pengunjung membaca di blog kita itu kodenya gimana mas
BalasHapusKalo itu menggunakan sticky widget kang.. bisa dicari di google, atau kapan-kapan akan saya share di blog ini.
Hapusbang bagaimana caranya supaya linknya bisa berubah warna menjadi warna putih?
BalasHapus