Cara Membuat Widget Popular Post Menjadi Keren Pada Blog

Tanky Street

TANKYSTREET - Pada posting kali ini saya akan membahas mengenai bagaimana cara membuat
widget popular posts dengan tampilan yang lebih menarik. Widget ini dibuat tanpa memasukkan
gambarnya (thumbnail) karena memperhatikan dampak loading faster.

Widget blog merupakan bagian-bagian khusus yang terpisah dari bagian isi halaman atau isi posting

sebuah blog atau web. Widget biasanya dipasang pada sidebar di samping isi posting atau di bagian

atas bahkan pada bagian paling bawah sekalipun. Widget biasanya berisi informasi-informasi utama

yang biasanya perlu dikethui oleh pengunjung, seperti posting yang paling populer di blog tersebut,

jumlah pengunjung suatu blog, komentar terbaru, posting terbaru, atau bahkan alamat sosial media

dari blog atau pemilik blog tersebut.

Memasang widget pada sebuah blog bukanlah hal yang diharuskan ataupun sangat direkomendasikan.

Ada beberapa keuntungan dan kerugian memasang widget pada blog, terutama jika memasang terlalu

banyak widget akan membuat halaman suatu blog jadi sangat lama untuk diload dan dapat mengganggu

pengunjung, dengan kata lain blog jadi lebih berat. Disamping itu, memasang widget dapat memberikan

navigasi atau guard bagi pengunjung di suatu blog, misalnya saja seorang pengunjung blog mencari

artikel yang membahas tentang Photoshop, maka dengan bantuan widget "tags" pengunjung bisa melihat

seluruh isi blog mengenai kategori tertentu. Bagi pengunjung yang memang berlangganan pada suatu

blog, widget menjadi hal yang mungkin lebih sering diperhatikan oleh pengunjung tersebut.

Nah, oleh karena itu, untuk teman-teman yang juga mempunyai blog atau halaman web, bijaklah dalam

memilih apakah akan menggunakan widget atau tidak pada blog masing-masing. Memilih yang manapun

sebenarnya tidak ada salhnya, sah sah saja. Tetapi jika memasang widget saya sarankan sebaiknya

buatlah tampilan yang menarik bagi pengunjung dengan tidak mengesampingkan faktor kecepatan

loading blog. Nah, berikut ini saya berikan salah satu tips untuk mempercantik tampilan sidebar

khususnya tampilan widget yang bisa teman-teman terapkan pada blog masing-masing.

Pada template lama blog ini, saya menggunakan sebuah style khusus untuk tampilan widget popular

post yang saya pasang, nah barangkali diantara teman-teman ada yang berminat memasang tampilan

serupa pada blognya silakan ikuti langkah-langkah berikut ini. Jadi untuk menambahkannya

pertama-tama silakan teman-teman tambahkan widget/gadget Popular Posts (jika belum ada) pada

blog teman-teman.

Selanjutnya widget yang telah dipasang perlu dilakukan beberapa pengaturan, atur widget popular
posts yang akan teman-teman tambahakan seperti pada gambar berikut ini, atur waktunya
(Paling banyak dikunjungi) sesuai keinginan teman-teman, sebaiknya gunakan populer per bulan
(30 hari terakhir) atau per pekan (7 hari terakhir) agar lebih cepat terperbaharui sehingga pengunjung
akan melihat hasil yang berbeda pada rentang waktu.

Kemudian Simpan hasil pengaturan terhadap widget yang telah teman-teman pasang tadi, selanjutnya
buka bagian Tema pada blog teman-teman (jika menggunakan Blogger) lalu pilih Edit HTML.

Kemudian kita akan mengatur bagian utama dari memperindah tampilan widget popular post ini,
kita akan menambahkan kode CSS, berikut ini kode tersebut, tambahkan kode CSS berikut ini.
Letakkan diatas kode ]]></b:skin>.

/* Popular Posts */ .PopularPosts ul{padding:0;margin:0} .PopularPosts li{display:block;padding:3px 25px!important;margin:5px 0 0 20px;position:relative;border:1px solid #00aeef;transition:all .15s} .PopularPosts a{color:#333;font-weight:bold} .PopularPosts li:before{content:"\f0c1";position:absolute;top:6%;left:-5%;background:#00aeef;padding:10px;border-radius:50%;height:12px;width:12px;font:normal normal normal 14px/1 FontAwesome;color:#fff;text-align:center;border:1px solid #00aeef} .PopularPosts .item-snippet{text-align:left;margin-bottom:3px;cursor:default;font-size:11px} .PopularPosts .item-title{text-align:center} .PopularPosts li:hover{background:#00aeef;color:#fff;border:1px solid #d8d9da} .PopularPosts li:hover a{color:#fff} .PopularPosts li:hover:before{border:1px solid #f5f8fa} .item-content .item-thumbnail{display:none}

Silahkan dicoba pada blog anda...

Read Also

Share this post

Get Link Facebook Messenger Whatsapp Whatsapp Twitter Telegram Linkedin Tumblr Pinterest

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://tankystreet.blogspot.com/. Terima kasih.