Header Ads

Cara Membuat Popular Post Warna Warni

Cara Membuat Widget Popular Post Warna-Warni (Rainbow Popular Post)

Popular Posts adalah widget yang disediakan oleh Blogger fungsinya untuk menampilkan tulisan paling banyak dilihat di blog dalam 7 hari, bulan lalu dan sepanjang masa.Popular Post memiliki tiga mode tampilan yaitu hanya judul saja, judul dengan thumbnail gambar, atau judul bersama dengan tulisan potongan.

Baca Juga : Cara Memasang Slider Otomatis Artikel Terbaru di Sidebar Blog

di Postingan  ini saya kan Share Cara Membuat Popular Post Warna Warni atau Rainbow Popular Post, jika anda berminat memasangnya di bog anda silahkan ikuti langkah-langkah pemasangannya di bawah ini.

untuk memasangnya anda masuk ke Template kemudian klik Edit HTML lalu Cari kode
]]></b:skin> atau </style> jika sudah ketemu paste kan code Css di bawah ini tepat di atas salah satu kode tersebut.



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

Simpan Template.

Jika ingin merubah warna-warna Backround di Widget tersebut silahkan Anda ganti kode warna yang sudah saya tandai dengan warna merah di kode Css diatas.
Selanjutnya anda masuk ke tata letak kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja Seperti Gambar di Bawah ini.


Cara Membuat Popular Post Warna Warni
Save, dan Selesai

No comments

Powered by Blogger.