Cara Membuat Widget Popular Post Berwarna-Warni di Blogspot

Popular Post  Berwarna - Warni

Popular post adalah salah satu widget blogger yang paling sering di pasang di blog, yang bertujuan untuk memperlihatkan beberapa artikel terbaik dalam blog, dan ini tentu akan menambah page view untuk blog yang kamu kelola.

Popular post bisa kamu pasang pada sidebar blog dengan mudah, karena merupakan salah satu widget default dari blogger. Namun, modifikasi blog saat ini sangat beragam mulai yang suka paduan warna, bermain pada garis atau yang lainnya. Nah, kali ini saya akan membrikan trik untuk membuat popular post default menjadi warna-warni yah, minimal bisa memberi sentuhan warna lah untuk mempercantik tampilan blog.

Screenshot:

Cara Memasang Widget Popular Post Berwarna-warni di Blogspot

Popular post ini sangatlah menarik. Kamu bisa mengganti warna di popular post ini menjadi warna yang kamu sukai. Selain menarik perhatian pembaca tetapi juga menambah nilai estetika sebuah blog. Bagi kamu yang ingin membuat widget popular post berwarna-warni maka silakan ikuti langkah-langkah berikut.

Baca juga :
Software Untuk Mengetahui Kode Warna HTML - Colorpic
Cara Screenshot Gambar di Website/Blog Satu Halaman Penuh
Cara Memperkecil Ukuran Foto Dengan TinyPNG

Langkah-langkah yang harus dilewati untuk memasang popular post berwarna-warni di blog:

1. Login dulu akun blogger kamu.
2. Selanjutnya pilih menu Template lalu pilih Edit html.
3. Kemudian cari kode ]]></b:skin> lalu letakkan kode berikut tepat diatas kode tadi.

/* Popular Post  Warna - Warni*/
.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 {color:#444 !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;}
.PopularPosts ul li:nth-child(1) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(3) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts ul li:nth-child(6) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(7) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(8) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(9) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(10) {background-color:#FEE4E3;margin-right:1% !important}
.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;}
/*End Popular Post  Warna - Warni*/

Catatan :Ganti background color dengan warna merah diatas sesuai dengan kode warna yang kamu sukai sesuai dengan kebutuhan. bisa dilihat disini 

4. Silahkan Save dan lihat hasilnya.

Baca Juga: Cara Membuat Form Pesan Diatas Kolom Komentar

Nah,..... Sekarang tampilan popular post di blog yang kamu kelola sudah menjadi lebih menarik dan akan memikat hati pengunjung untuk membaca artikel pada popular post. Demikian sedikit share tentang Cara Membuat Widget Popular Post Berwarna-Warni di Blogspot, Semoga dapat menambah informasi dan berguna buat kamu yang sedang membangun sebuah blog. selamat mencoba dan semoga berhasil.

Terimakasih telah berkunjung dan menyempatkan untuk membaca.

Tweet

Artikel keren lainnya: