Cara Membuat Widget Popular Post Keren diBlog

Cara membuat widget popular post keren diBlog, Widget popular post sering kita jumpai di blog atau situs web lain, namun, kebanyakan situs blog atau web memiliki widget popular post dengan style itu itu aja yang membuat kita merasa bosan dengan style lama tersebut.

Dengan menggunakan style yang berbeda dengan biasanya pasti blog kita jadi lebih menarik untuk dilihat, dan tentunya cara ini sangat gampang untuk dicoba
.

Cara ini saya dapatkan dari referensi blog saya yaitu Mediaachmad. Yang berbeda hanyalah dari segi warna, dan tentunya saya juga sudah izin untuk melakukan repost kepada pembuat widget popular post tersebut. Oke langsung saja masuk ketutorial bagaimana cara membuat widget popular post menjadi lebih menarik untuk dilihat pengunjung blog maupun kita sendiri.

Caranya :

1. Login ke Blogger terlebih dahulu,
2. Masuk ke menu tab Theme (Tema) → Edit HTML,
3. Cari kode html ]]></bskin> atau </style> agar lebih cepat tekan CTRL + F Masukkan code yang sebelumnya.
4. Tambahkan kode CSS dibawah ini, tepat diatas kode ]]></skin> atau </style> & Simpan.

/*POPULAR POST By Anirocksite.com*/
.popular-posts {background: linear-gradient(127deg, #8a2be2, #8a2be2);}
.PopularPosts ul li:hover{background: #3333330f;}
.popular-posts ul li a {color:#fff;}
.popular-posts ul li a:hover {color:#fff;}
.PopularPosts h2 {text-indent: 20px;border-top: 2px solid #df0d83;margin-bottom: 0px;border-bottom: none;width: 100%;padding-bottom: 15px;background: #fff;padding-top: 15px;}
.PopularPosts h2 span {margin-left:20px}
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {margin: 0 0;padding: 0 0;list-style:none;border:none;outline:none;}
.PopularPosts .widget-content ul {margin: 0;list-style:none;counter-reset:num;}
.PopularPosts .widget-content ul li img {display: block;width: 70px;height: 70px;float: left;}
.PopularPosts .widget-content ul li {margin: 0;counter-increment: num;position: relative;border-bottom: 1px solid rgba(0,0,0,0.08);border-top: 1px solid rgba(255,255,255,0.12);}
.PopularPosts ul li:last-child {margin-bottom: 0px;}
.PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li > a::after {background: #efefef;}
.PopularPosts .item-title {line-height: 1.6;margin-right: 8px;min-height: 40px;font-weight: bold;}
.PopularPosts .item-thumbnail {float: left;margin-right: 8px;}
.PopularPosts .item-snippet {line-height: 1.6em;margin-top: 8px;opacity: 0.925;}
.PopularPosts ul li > a {font-weight: bold;    font-size: 14px;}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {margin-left: 28px;}
.PopularPosts ul li > a {display: block;padding: 8px 20px;font-size: 15px;font-weight: 400;min-height: 45px;}

• Jika kalian ingin menghapus Nomor/Angka yang ada disamping widget popular post kalian bisa cari di di Html  Numberedpopularposts Kemudian hapus semua code cssnya.

• Untuk Mengganti Warna Widget Popular Posts Kalian dapat mengubah code berwana AQUA yang ada di CSS dengan warna yang kalian inginkan.

• Jika ada hal lain yang ingin di edit silahkan diedit dengan sesuai keinginan anda (untuk mencoba atau bereksperimen silahkan mengedit melalui inspect elemen).

Cara Setting Widget Pupolar Post : 

1. Isi judul sesuai keinginan,
2. Isi paling banyak dikunjungi sesuai keinginan juga
3. Untuk tampilan silahkan hapus tanda centang seperti digambar berikut,
4. Isi jumlah tampilan popular post sesuai keinginan juga.
5. Kemudian "Simpan".

Sekian tutorial membuat widget popular post keren diblog, jika ada kesalahan atau kekurangan silahkan beri komentar.