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) alasannya yaitu memperhatikan imbas loading faster.
Widget blog merupakan bagian-bagian khusus yang terpisah dari bab isi halaman atau isi posting sebuah blog atau web. Widget biasanya dipasang pada sidebar di samping isi posting atau di bab atas bahkan pada bab 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 dan sangat penting. 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 ihwal Photoshop, maka dengan pertolongan 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 alasannya yaitu 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 bahwasanya tidak ada salahnya, 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. Bisa lihat halaman demo di bawah:
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. Makara 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 bab Tema pada blog teman-teman (jika memakai Blogger) kemudian pilih Edit HTML.
Kemudian kita akan mengatur bab utama dari memperindah tampilan widget popular post ini, kita akan menambahkan instruksi CSS, berikut ini instruksi tersebut, tambahkan instruksi CSS berikut ini. Letakkan diatas instruksi
]]></b:skin>./* Popular Posts */ .PopularPosts ul{padding:0;margin:0} .PopularPosts li{display:block;padding:3px 25px!important;margin:5px 0 0 20px!important;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}Kode CSS tumpang tindih
Jika tampilannya kacau, kau sanggup menambahkan instruksi!important pada bab yang tertimpa dengan instruksi CSS lain di blog kamu. Kamu sanggup mencobanya melalui inspect elements di browser, pelajari lebih lanjut ihwal inspeksi elemen di sini.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 dan hingga jumpa!
Sumber http://www.maringngerrang.com/
