Cara Membuat Popular Post Lebih Berwarna Di Blog Seperti Pelangi | NIGHT002

PopularPost atau Artikel Popular adalah postingan atau artikel yang banyak di lihat atau di baca oleh pengunjung blog / website kawan.Untuk memperindah blog anda tentunya dengan menambahkan widget, slideshow, dll. Bagaimana jika Popular Post yang di ubah backgroundnya menjadi warna warni kawan ? itu bukan mustahil kawan karna kami disini mau membuat Artikel : Cara Membuat PopularPost Lebih Berwarna Seperti Pelangi Pada Blog | NIGHT002 Artikel ini termasuk ke dalam : Blogger Tutorial.

Hasil dari Artikel Ini :

Berikut ini Tutorial Untuk Mengubah background PopularPost :

1. Login Blogger Tentunya
2. Tata Letak
3. Jika Kawan sudah mempunyai widget Populerpostnya.
4. Ganti settingnya seperti gambar di bawah ini
   
5. Jika Sudah Simpan

1. Lalu kawan menuju Template > Edit Template
2. Cari Kata ]]></b:skin>  di kolom template.   Tips : Gunakan CTRL + F Di Kolom Template
3. Jika sudah ketemu copy paste script di bawah ini tepat di atas kode ]]></b:skin>

/*Custom Popular Post Start */
.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}
/* Ganti WArna Sesuka Hati */
.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}

Yang berwarna merah itu kode warnanya atau warna background. Kawan bisa menggantinya sesuai selera Kawan bisa ambil Kode Warnanya Klik : Tools Warna Generator.

Sekian post kali ini semoga bermanfaat bagi Kawan Night002

Share :

Facebook Google+ Twitter