Merombak Blog Sendiri Ternyata Menyenangkan
Dan memuaskan! Mempunyai tampilan blog pribadi yang sesuai selera adalah hal yang ideal untuk setiap blogger, tapi apa daya tidak semua blogger memiliki kemampuan bahasa html dan css serta javascript yang mumpuni untuk membuat sebuah tema baru atau setidaknya merombak blog mereka sendiri.
Setidaknya sampai beberapa bulan yang lalu, saya masih bingung untuk merubah tampilan halaman blog ini, terutama pada bagian mobilenya. Untuk versi desktopnya sendiri, blog ini sudah bisa dibilang lumayan enak dipandang mata.
Dua minggu ini saya mulai belajar lagi tutorial html dan css dari para programmer youtube yang mengajarkan html dan css dari dasar dengan contoh proyek pembuatan website, seperti:
- cloning home youtube
- cloning home microsoft (tahun 2020)
- membuat header
- membuat linktree versi sendiri
- membuat button
- membuat header
Dengan belajar sambil membuat projek atau aplikasi, saya lebih cepat menangkap hal-hal yang diajarkan oleh para tutor dibandingkan hanya mendengarkan/membaca teori. Ada banyak lagi tutorial lainnya yang berhubungan dengan html dan terutama css yang tidak tercantum pada list di atas, karena emang css banyak properti yang harus diketahui dan saya tidak sempat mendokumentasikannya.
Apa Saja Yang Di Rombak dari Blog Ini?
Hal paling awal yang saya ubah adalah tampilan blog ini ketika dikunjungi via handphone/mobile, cara nya adalah dengan merombak atau lebih tepatnya menambahkan media querynya. Blog ini pada awal perombakan theme dari theme starter bashblog ke theme ini, memang tidak memiliki properti css responsif karena emang saat itu saya belum tahu ilmunya.
Jadi saya menambah element media query agar tampilan blog ini lebih mobile friendly. Selain itu ada beberapa element tambahan yang saya ubah yang awalnya membuat tampilan blog ini agak kurang profesional seperti tag code yang meleber ke samping sampai melewati border blog.
Prosesnya lumayan menyita waktu karena saya belum tahu cara wrapping text yang benar, sampai saya menemukan word-break css property.
Selanjutnya saya melakukan perubahan pada header, dengan mengganti margin baik untuk tampilan desktop maupun mobile, selain itu saya juga menambahkan navigasi home dan about yang dari sejak awal saya butuhkan tapi belum tahu cara menambahkan fungsi tersebut.
H4 menjadi pilihan untuk sub judul, karena secara default bashblog menggunakan H3 sebagai judul, untuk kebaikan seo jadi saya tetapkan untuk saat ini dan seterusnya menggunakan format tersebut.
Font Merrieweather dari Google Fonts saya ganti menjadi Recursive Fonts dan dihosting secara langsung tanpa menggunakan google font sebagai hostingnya. Cara yang saya lakukan ini selain menghemat bandwidth juga mengurangi jejak dari Google. Walaupun blog ini masih dihosting menggunakan firebase yang notabene punya Google.
Hasil GTMetrix
Sebelum saya mengupload hasil terbaru dari blog yang sudah dirombak, terlebih dahulu saya test menggunakan gtmetrix yang hasilnya bisa dilihat disini. Blog ini juga secara alami di archive oleh Internet Archive dot org dan inilah tampilan terakhirnya.
Apa Selanjutnya?
Karena proses belajar html, css, dan javascript saya masih dalam tahap cupu, jadi kedepannya mungkin ada beberapa update lagi untuk blog ini.
Saya juga memiliki rencana untuk membuat theme htmly dan Hugo sendiri. Kita lihat aja kedepan :)