Membuat Popular Post Warna-Warni Di Blogspot
Cara menciptakan popular post keren warna-warni di blog – Popular post ialah salah satu widget blogger yang paling sering di pasang di blog, yang bertujuan untuk menawarkan beberapa artikel terbaik dalam blog, dan ini tentu akan menambah page view untuk blog anda.
Popular post sanggup anda pasang pada sidebar blog dengan mudah, alasannya ialah merupakan salah satu widget default dari blogger. Namun, modifikasi blog dikala ini sangat bermacam-macam mulai yang suka paduan warna, bermain pada garis atau yang lainnya. Nah, kali ini saya akan membrikan trik untuk menciptakan popular post default menjadi warna-warni keren banget untuk mempercantik tampilan blog.
Screenshot:
Cara Memasang Popular Post Keren Warna-warni di Blog
Berikut langkah-langkah yang harus dilewati untuk memasang popular post keren di blog:
1. Login dulu akun blogger sobat.
2. Selanjutnya pilih sajian “Template” kemudian pilih “Edit html”.
3. Kemudian cari arahan ]]></b:skin> kemudian letakkan arahan berikut sempurna diatas arahan 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: Cara Membuat Menu Navigasi Responsive di Blogspot
Sekarang tampilan popular post di blog sahabat sudah menjadi keren dan akan memikat hati pengunjung untuk membaca artikel pada popular post. Semoga sanggup bermanfaat dan selamat mencoba.