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.
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.
loading...
Belum ada tanggapan untuk "Cara Membuat Widget Popular Post Berwarna-Warni di Blogspot"
Posting Komentar
Peraturan Berkomentar
[1] Dilarang menghina, Promosi (Iklan), Menyelipkan Link Aktif, dsb
[2] Dilarang Berkomentar berbau Porno, Spam, Sara, Politik, Provokasi,
[3] Berkomentarlah yang Sopan, Bijak, dan Sesuai Artikel, (Dilarang OOT)