Cara Membuat Widget Popular Post Warna

Selamat pagi, siang ataupun malam kapan pun kalian membaca artikel ini sobat Animegane ^^. Kali ini Animegane akan membahas tentang cara membuat widget popular post warna - warni. Tau kan apa gunanya popular post itu ? Popular post berguna sebagai informasi kepada pengunjung blog kamu tentang postingan mana yang lagi banyak dikunjungi (alias lagi ngetrend) di blog kamu. Untuk membuat widget popular post cukup gampang, kalian cukup menambahkan widget "Popular Post" atau "Entri Populer" yang sudah disediakan oleh blogger.

Tapi kalau kamu bukan tipe orang yang suka tampilan biasa - biasa saja, kamu bisa membuat tampilan popular post yang lebih menarik dengan memberi warna - warni pada daftar popular post kamu. Untuk mengubahnya kamu perlu menambahkan script CSS pada struktur HTML pada template yang kamu pakai.

Untuk membuat tampilan popular post seperti di atas, ikuti langkah - langkah berikut ini :

Step1 : Langkah pertama masuk dulu ke dashbor blog kamu, jangan blog orang ya.

Step2 : Masuk ke Tata Letak, setelah itu klik Tambah Gadget >>> Entri Populer. Setelah itu atur sesuai gambar di bawah.

Step3 : Setelah selesai membuat widget popular post, selanjutnya kamu masuk ke bagian Template dan pilih Edit HTML. Cari kode ]]></b:skin> atau </style> dengan menggunakan Ctrl+F dan copy kan script di bawah ini di atas kode tadi.

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

Note : kode yang berwarna biru tua adalah kode warna, kamu bisa menggantinya dengan warna yang kamu suka. Untuk melihat kode - kode warna html bisa lihat di sini.

Step4 : Kalau sudah selesai mengcopy kode di atas, klik Simpan Template. Dan kamu sudah selesai membuat tampilan popular post yang warna - warni.

Yah walaupun Animegane membuat artikel tentang cara membuat widget popular post warna - warni, sebenarnya Animegane sendiri lebih suka sama tampilan yang simpel dan sederhana aja. Semuanya kembali ke selera masing - masing aja. Semoga artikel ini cukup membantu kalian yang ingin memperindah blog yang kalian punya dengan kreasi kalian sendiri ya ^^.

Animegane

Cara Membuat Widget Popular Post Warna - Warni

Related Post