Percantik Blog Anda dengan Popular Post Keren Warna-Warni

Oleh Unknown

Ayo Bagikan Gan :

Tweet

Percantik Blog Anda dengan Popular Post Keren Warna-Warni_ Memiliki tampilan blog yang menarik tentu saja menjadi kebanggaan bagi seorang blogger. Begitu juga dengan pengunjung blog, mereka akan merasa nyaman dengan penampilan blog yang menarik dan enak dilihat.

Kali ini, KOMCHAR akan memberikan tips mempercantik Popular Post menjadi semakin menarik. Popular post menjadi bagian yang sangat penting untuk sebuah blog. Dimana pengunjung dapat mengetahui artikel yang paling banyak dilihat pengunjung.

Tampilannya akan seperti dibawah ini.

Buat anda yang penasaran ikuti cara pembuatanya di bawah ini.

1.Masuk ke akun Blogger yang anda miliki

2.Selanjutnya Tambahkan Gadget > Entri Popular lalu atur seperti gambar dibawah.

Untuk judul bisa dirubah sesuka hati Anda. Hapus centang Thumbnail gambar dan cuplikan, dan setting tampilan untuk 10 entri.

3.Edit HTML dari menu Template dengan cara tambahkan CSS dibawah ini diatas kode ]]></b:skin> atau </style> dan pilih Simpan.

/*Custom 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}

Sekarang saatnya lihat blog anda dan lihat perubahan yang terjadi. Menjadi semakin keren bukan ? 

Semoga Bermanfaat. Silahkan dishare dan di Comment.

Tag : Beranda, Blogging, Percantik Blog