Tuesday, April 11, 2017

Membuat Widget Popular Post Keren Ala Maringngerrang Blog


Assalamu'alaikum warohmatullahi wabarokatuh. Pada posting kali ini saya akan membahas mengenai bagaimana cara membuat widget popular posts dengan tampilan yang lebih menarik. Membuat widget popular posts ala Maringngerrang Blog. 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 rentan waktu tertentu.


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}

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin teman-teman tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.
Disqus Comments