Popular Post Keren Berwarna di Blogspot

Membuat Widget Popular Post Keren di Blog – Popular Post atau yang dikenal dengan artikel yang paling sering dibaca pengunjung adalah widget yang menampilkan artikel populer di blog atau website. Popular Post default dari blogger akan terlihat sederhana dengan background putih. Namun, anda bisa merubahnya dengan popular post keren berwarna agar tampil lebih segar dimata pengunjung.

Berikut beberapa koleksi blog saya untuk membuat popular post dengan tampilan berwarna, pilih yang paling anda suka dan pasang di blog sekarang juga.

1. Popular Post Warna Hitam dengan Nomor

Kode : 

/*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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}

.PopularPosts ul li a{color:#fff!important}

.PopularPosts ul li a:hover{color:#2c3e50!important}

.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;bottom:0;right:0;padding-right:0!important}

.PopularPosts ul li:nth-child(1){background-color:#111;}.PopularPosts ul li:nth-child(2){background-color:#222;}.PopularPosts ul li:nth-child(3){background-color:#333;}.PopularPosts ul li:nth-child(4){background-color:#444;}.PopularPosts ul li:nth-child(5){background-color:#555;}

.PopularPosts ul li:nth-child(6){background-color:#666;}.PopularPosts ul li:nth-child(7){background-color:#777;}.PopularPosts ul li:nth-child(8){background-color:#888;}.PopularPosts ul li:nth-child(9){background-color:#999;}.PopularPosts ul li:nth-child(10){background-color:#aaa;}

.PopularPosts .item-thumbnail{margin:0 0 0 0}.PopularPosts .item-snippet{font-size:11px}

2. Popular Post Warna-Warni Keren Ala Kang Mousir

Kode : 

/*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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}

.PopularPosts ul li a{color:#fff!important}

.PopularPosts ul li a:hover{color:#2c3e50!important}

.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;bottom:0;right:0;padding-right:0!important}

/* Pengaturan Warna */

.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}

.PopularPosts ul li:nth-child(2){background-color:#f39c12;}

.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}

.PopularPosts ul li:nth-child(4){background-color:#27ae60;}

.PopularPosts ul li:nth-child(5){background-color:#e67e22;}

.PopularPosts ul li:nth-child(6){background-color:#d35400;}

.PopularPosts ul li:nth-child(7){background-color:#3498db;}

.PopularPosts ul li:nth-child(8){background-color:#2980b9;}

.PopularPosts ul li:nth-child(9){background-color:#ea6153;}

.PopularPosts ul li:nth-child(10){background-color:#c0392b;}

.PopularPosts .item-thumbnail{margin:0 0 0 0}

.PopularPosts .item-snippet{font-size:11px}

3. Popular Post Keren Ala Mas Sugeng

Kode : 

/* 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 {font-weight:normal;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:0px;right:0px;padding-right:0px !important;}

.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;}

.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed}

.widget-content ul li:last-child{border-bottom:medium none !important}

.widget-content ul li a{color:#333}

.widget-content ul li a:hover{color:#C80441}

.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00}

4. Popular Post Default dengan Nomor Keren

Kode : 

/* Popular Post */

.popular-posts ul {padding-left: 0px;counter-reset: popcount;}

.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #292D30;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #666666; }

.popular-posts ul li {border-bottom: 1px dashed #dddddd;}

.popular-posts ul li:hover {border-bottom: 1px dashed #696969;}

.popular-posts ul li a {text-decoration:none; color:#5A5F63;}

.popular-posts ul li a:hover {text-decoration:none;}

Cara Memasang Popular Post Keren Warna-Warni di Blog

1. Pilih salah satu Kode popular post diatas.


2. Login akun blogger sobat lalu Pilih menu Template >> Edit HTML


3. Kemudian cari kode berikut ]]></b:skin> lalu letakkan kode popular post berwarna yang sudah anda pilih tadi  tepat diatas kode ]]></b:skin>


4. Save Template lalu lihat hasilnya.

Caranya cukup mudah, silahkan ikuti petunjuk berikut ini sampai selesai. Anda bisa bisa mengganti popular post default menjadi keren dengan pilihan versi diatas, pilih yang paling menarik dan pasang di blog.
Demikian Cara Membuat Popular Post Keren Berwarna di Blogspot dengan berbagai pilihan menarik untuk mempercantik blog anda. Semoga dapat bermanfaat.

Share this post