Membuat Widget Popular Post Keren Ala Blog
Pada posting kali ini saya akan membahas mengenai bagaimana cara menciptakan widget popular posts dengan tampilan yang lebih menarik. Membuat widget popular posts ala Blog. Widget ini dibentuk tanpa memasukkan gambarnya (thumbnail) sebab memperhatikan efek loading faster.
Widget blog merupakan bagian-bagian khusus yang terpisah dari pecahan isi halaman atau isi posting sebuah blog atau web. Widget biasanya dipasang pada sidebar di samping isi posting atau di pecahan atas bahkan pada pecahan paling bawah sekalipun. Widget biasanya berisi informasi-informasi utama yang biasanya perlu dikethui oleh pengunjung, menyerupai posting yang paling terkenal 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 laba dan kerugian memasang widget pada blog, terutama bila memasang terlalu banyak widget akan menciptakan halaman suatu blog jadi sangat usang untuk diload dan sanggup mengganggu pengunjung, dengan kata lain blog jadi lebih berat. Disamping itu, memasang widget sanggup menunjukkan navigasi atau guard bagi pengunjung di suatu blog, contohnya saja seorang pengunjung blog mencari artikel yang membahas wacana Photoshop, maka dengan sumbangan widget "tags" pengunjung sanggup 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 sebab itu, untuk teman-teman yang juga memiliki blog atau halaman web, bijaklah dalam menentukan apakah akan memakai widget atau tidak pada blog masing-masing. Memilih yang manapun bekerjsama tidak ada salhnya, sah sah saja. Tetapi bila 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 sanggup teman-teman terapkan pada blog masing-masing.
Pada template usang blog ini, saya memakai 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. Kaprikornus 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 menyerupai pada gambar berikut ini, atur waktunya (Paling banyak dikunjungi) sesuai impian teman-teman, sebaiknya gunakan terkenal per bulan (30 hari terakhir) atau per pekan (7 hari terakhir) semoga 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 pecahan Tema pada blog teman-teman (jika memakai Blogger) kemudian pilih Edit HTML.
Kemudian kita akan mengatur pecahan utama dari memperindah tampilan widget popular post ini, kita akan menambahkan arahan CSS, berikut ini arahan tersebut, tambahkan arahan CSS berikut ini. Letakkan diatas arahan
]]></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 sanggup bermanfaat, kalau ada yang ingin teman-teman tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau sanggup juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.
