Cara Membuat Populer Post Warna-Warni

Artikel terkait : Cara Membuat Populer Post Warna-Warni

Populer Post adalah suatu widget yang menampilkan artikel yang paling populer atau yang paling banyak dilihat oleh pengunjung, jadi saya menyarankan anda untuk merubah warna widget Entri Populer atau Populer Post menjadi menarik karena ada ber-aneka warna. Widget ini juga perlu dipasang diblog anda untuk tetap dilihat oleh banyak orang.

CARA MEMBUAT POPULER POST WARNA WARNI

1. Login ke akun Blogger anda.

2. Masuk ke Dashboard, Template >> Edit HTML.

3. Cari kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode ]]></b:skin>.

/*Widget*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin: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}.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#fff!important}.PopularPosts a:hover{color:#222!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:#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}.cloud-label-widget-content{text-align:left}.label-size{display:block;background:#fff;float:left;margin:0 2px 2px 0;color:#000!important;border:1px solid #ccc;padding:5px}.label-size:hover{border:1px solid #000;color:#000!important}.label-size a:hover{color:#000!important}

4. Simpan.