Cara Membuat Popular Post di Blog

Popular Post adalah widget yang menampilkan artikel yang sering dilihat oleh pengunjung.
Cara membuat popular post di blog – Hi Guys! 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 anda.

Hasil gambar untuk popular post
Popular post bisa anda 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 keren banget untuk mempercantik tampilan blog.

Screenshot:

membuat popular post warna warni di blogspot

 Cara Memasang Popular Post di Blog

Berikut langkah-langkah yang harus dilewati untuk memasang popular post keren di blog:
1. Login dulu akun blogger sobat.
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 */
.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;}

4. Silahkan Save dan lihat hasilnya.

Baca juga: 5 Hal Yang Harus Ada Pada Blog

Itulah pembuatan dan pemasangan Popular Post. Semoga bermanfaat.
Terimakasih.
Mahasiswa & Gamer

Posting Komentar

Silahkan Tinggalkan Komentar!
© Ambyar Blog. All rights reserved. Developed by Jago Desain