Selasa, 23 Mei 2017

Cara Membuat Widget Popular Post Menjadi Warna Warni di Blog

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.

Mendesain Widget Popular Post Menjadi Warna Warni di Blog
Dengan widget ini pengunjung blog sobat akan menjadi tertarik mencoba membaca postingan yang sedang populer. Namun, supaya pengunjung dapat lebih tertarik, sobat bisa menghias widget popular post ini menjadi warna-warni.
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

Entri Populer

  • Silahkan konfigurasikan widget popular post sobat, sesuai selera masing-masing. Jika sudah selesai, klik simpan.
Konfigurasikan Widget Popular Post
Dengan ini, sobat telah memasang widget popular post dengan tampilan default sesuai template blog sobat. Sekarang mari kita percantik menjadi warna warni menggunakan CSS.

Langkah Kedua: Menambahkan CSS di Blog


Tema -> 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.

17 comments:

  1. pas baget yg di cari akhirnya nemu juga, kangsung di coba

    BalasHapus
  2. widget populer post nya jadi makin keren nih :D, tapi ane kurang suka ama warna warni gan, request warna flat dung bershadow , dan lainya :D

    BalasHapus
    Balasan
    1. Warna flat bisa dilihat disini : http://www.aldi.web.id/p/flat-ui-color-generator.html

      Hapus
  3. mantab, berguna sekali artikelnya. thanks gan!

    BalasHapus
  4. Pas banget , mau bikin widget ah

    BalasHapus
  5. menurut saya yg css yg simple aja gan. biar gk lemot.

    BalasHapus
    Balasan
    1. CSS tidak terlalu mempengaruhi kecepatan blog gan..

      Hapus
  6. mantap gan. izin nyoba kyaknya bgus tu..

    BalasHapus
  7. wahhh kerennn :D

    BalasHapus
  8. Saya copy script nya gan.

    BalasHapus
  9. kalau ingin membuat widget popular mengikuti ke bawah dan ke atas ke tika pengunjung membaca di blog kita itu kodenya gimana mas

    BalasHapus
    Balasan
    1. Kalo itu menggunakan sticky widget kang.. bisa dicari di google, atau kapan-kapan akan saya share di blog ini.

      Hapus
  10. bang bagaimana caranya supaya linknya bisa berubah warna menjadi warna putih?

    BalasHapus

Tata Tertib Berkomentar :
1.) Berkomentarlah dengan sopan sesuai dengan topik artikel.
2.) Jangan sertakan link aktif dalam komentar, karena saya pasti akan mengunjungi balik blog sobat.
3.) Jika artikel ini bermanfaat bagi sobat, bagikan artikel ini ke teman-teman sobat melalui Facebook, Google+, Twitter dan lain lain, karena "berbagi itu indah" hehehe.

Terima kasih sudah berkunjung.