Cara Membuat Widget Popular Post Warna-Warni di Blog

Cara Membuat Widget Popular Post Warna-Warni di Blog - Cara Membuat Popular Post Warna-Warni di Blog sangatlah mudah dan gampang dipahami oleh para blogger pemula. Karna dengan membuat Popular Post Warna-Warni blog kita akan tampak keren dan tentunya berwarna. Cara yang saya pakai adalah Cara Terbaru untuk membuat Widget Popular Post Warna-Warni Pada Blog. Popular Post atau dalam bahasa Indonesia yang artinya Artikel Populer adalah artikel yang banyak di lihat oleh pengunjung blog kita.

Bagaimana Cara Membuat Widget Popular Post Warna-Warni di Blog? Kita hanya perlu menambahkan kode css pada HTML blog kita. Widget Popular Post Anda akan terlihat keren dan bagus. Jika memasang Widget Popular Post Warna-Warni di Blog. Dengan kita memasang widget Popular Post yang berwarna ini membuat pengunjung kita  betah dan akan memikat pengunjung kita untuk kembali. Baiklah, sudah cukup basa-basi nya. Sekarang saya akan membagikan Cara Membuat Widget Popular Post Warna-Warni di blog.

Cara Memasang Widget Popular Post Warna-Warni di Blog.

1. Login ke Blogger sobat dan Masuk ke Dashboard.

2. Pasang terlebih dahulu Widget Popular Post di blog sobat.

3. Masuk ke Template dan Klik Edit HTML.

4. Selanjutnya Copy kode di bawah ini. Lalu, letakkan diatas ]]></b:skin> atau </style>.

/* Custom CSS for Blogger Popular Post Widget */ .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{font-weight:bold;color:#000!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:0;right:0;padding-right:0!important} /* Set color and level */ .PopularPosts ul li:nth-child(1){background-color:#A51A5D;margin-right:1%!important} .PopularPosts ul li:nth-child(2){background-color:#F53477;margin-right:2%!important} .PopularPosts ul li:nth-child(3){background-color:#FD7FAA;margin-right:3%!important} .PopularPosts ul li:nth-child(4){background-color:#FF9201;margin-right:4%!important} .PopularPosts ul li:nth-child(5){background-color:#FDCB01;margin-right:5%!important} .PopularPosts ul li:nth-child(6){background-color:#DEDB00;margin-right:6%!important} .PopularPosts ul li:nth-child(7){background-color:#89C237;margin-right:7%!important} .PopularPosts ul li:nth-child(8){background-color:#44CCF2;margin-right:8%!important} .PopularPosts ul li:nth-child(9){background-color:#01ACE2;margin-right:9%!important} .PopularPosts ul li:nth-child(10){background-color:#94368E;margin-right:10%!important} .PopularPosts .item-thumbnail{margin:0 0 0 0} .PopularPosts .item-snippet{font-size:11px}

5. Simpan Template.

Bagaimana gampang bukan? Jika iya, tolong di Like dan Share artikel ini. Demikianlah Tutorial tentang Cara Membuat Widget Popular Post Warna-Warni di Blog. Semoga bermanfaat bagi yang menerapkannya. Terimakasih.