Blogger
Kali ini saya berbagi widget Profile buat di tempel di sidebar blog. Widget ini berbasis HTML + CSS dan tidak membuat blog berat. Beberapa waktu yang lalu ketika sedang ngulik widget profil bawaan Blogger, saya kepikiran untuk membuat tutorialnya.
Tapi setelah di pikir-pikir mending bikin versi HTML nya aja biar bisa di terapkan dengan mudah di platform mana aja. Menurut percobaan saya, widget ini bisa tampil dengan baik di Blogger dan Wordpress.
Demo Widget Profile
Kalian pasti pengen tau dulu widgetnya, terus liat-liat cocok apa engga. Oke saya mau kasih liat dulu widgetnya biar kalian ga penasaran.
| Screenshot tampilan widget Profile HTML |
Untuk melihat widget Profile secara langsung, kalian bisa mengunjungi halaman demo widget ini di Codepen. Setelah di pasang nanti, widget Profile ini ukuran lebar nya responsive atau fleksibel mengikuti lebar sidebar.
Kode HTML & CSS Widget Profile
Berikut adalah kode nya.
Di kode tersebut secara default berisi info profil dummy, silahkan di rubah sesuai dengan biodata kalian. Untuk ukuran background foto profilnya bebas, tapi saya sarankan berukuran 546x546 pixel. Oia pastikan di foto, posisi kalian berada di tengah, karena widget ini akan otomatis crop foto di tengah-tengah.
Cara Pasang Widget Profile
Blogger
Pertama instal dulu Google Font. Sebenarnya Google Font ini opsional, tapi saya sarankan untuk menginstalnya agar hasilnya maksimal. Di Dashboard pilih Tema, kemudian masuk ke edit HTML, temukan kode <head> kemudian tambahkan kode berikut ini di bawah kode tersebut.
Setelah selesai, keluar dan menuju dashboard lagi. Di dashboard pilih Tata Letak atau Layout, kemudian di bagian sidebar Tambahkan Gadget. Pilih gadget HTML/JavaScript lalu masukan semua kode widget Profilenya. Jangan lupa edit infonya jadi biodata kalian, lalu simpan.
Wordpress Self-Hosted
Di dashboard wordpress, hover ke menu Appearance kemudian pilih Widgets. Di halaman Widgets pilih Custom HTML dan pilih sidebar. Masukan semua kode widget Profilenya. Jangan lupa edit infonya jadi biodata kalian, lalu simpan.
Saya ga tau gimana cara instal Google Font di wordpress. Ketika saya menginstal kode ini di widget wordpress, widgetnya tampil dengan baik tanpa instal Google Font. Hmm, mungkin di wordpress sudah terinstal Google Font secara bawaan. Saya ga tau pasti karena saya newbie dalam dunia wordpress. 😅
Conclusion
Sejauh ini saya hanya mencoba widget ini di Blogger dan Wordpress. Di kedua platform tersebut widget ini tampil dengan baik. Apabila ada kendala atau ada yang ingin di tanyakan mengenai widget Profile ini, jangan sungkan untuk bertanya di kolom komentar.