MEMBUAT ENTRI POPULER WARNA-WARNI

   Setiap yang mempunyai blog pasti ingin agar blognya dapat tampil keren agar pemilik dan pengunjung blog dapat merasa puas dengan desain blog dibuat. Kali ini, saya akan membagikan tutorial membuat daftar entri populer keren dan warna-warni.

Cara Memasang Popular Post Keren dan Warna - Warni

1. Silakan masuk pada akun blogger Anda
2. Kemudian Tambahkan Gadget dan pilih Entri Populer
3, Silahkan ubah judul sesuai keinginan.
4. Jika ingin menampilkan gambar postingan silahkan centang "thumbnail gambar"
5. Dan jika ingin menampilkan sebagian keterangan postingan silahkan centang "cuplikan".
6. Atur jumlah maksimal entri yang ingin di tampilkan.

7. Buka dasboard blog sobat ITE lalu pilih Edit HTML.
8. Kemudian cari kode ]]></b:skin> atau </style> lalu paste-kan kode CSS dibawah ini di atasnya.

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

Keterangan : Untuk mengganti warna latar setiap entri silahkan ubah kode CSS yang diberi warna merah

Dan selamat, sekarang sobat ITE telah memiliki entri warna-warni yang keren. Demikian Cara Membuat Entri Populer warna-warni. Semoga bisa membantu sobat ITE dalam mendesain blog.

Share this post