Sewaktu scrolling beranda facebook, saya melihat sesuatu yang menarik.
Ternyata selama ini blog DTE punya fanspage di facebook.
Karena penasaran, saya kepo-in isi fanspage nya. Dan ternyata saya menemukan 'emas' yang selama ini saya cari.
Sebuah script untuk memuat halaman tanpa efek loading meski sudah berganti halaman.
Nama script nya F3H. Buatan Pak Taufik Nurrohman.
Karena saking excited-nya, saya langsung punya keinginan untuk membuat blog dengan script ini.
Sebagai gambaran, saya berencana untuk membuat blog dengan template spesifikasi berikut :
- Menggunakan template blogger versi 3
- Tidak menggunakan jQuery
- Desain postingan di halaman home berbentuk card, dan tentunya..
- Menggunakan script F3H
Proses pembuatan blog-nya kurang lebih 5 hari 5 malam hingga jadi seperti sekarang ini.
Di awal pembuatan, saya menggunakan base template yang sempat dibagikan oleh Kang Ismet sekitar tahun 2016-an.
Dengan template polosan tersebut, saya mengubah kurang lebih 90% dari seluruh bagian asli template tersebut.
Di hari pertama, susah sekali mencari script-script tertentu dalam bahasa Javascript, kebanyakan tutorial di Google dan Stackoverflow menggunakan jQuery sebagai bahasa pemrogramannya.
Saya akui, menggunakan jQuery memang sangat memudahkan & menyenangkan.
Tapi, setelah saya tahu kalau jQuery itu salah satu dari penyebab utama sebuah blog menjadi berat, saya putuskan untuk sebisa mungkin menghindari penggunaan jQuery.
Masalah tidak hanya tentang jQuery saja, tapi template blogger versi 3 juga.
Ada banyak sekali kode <b:include/> baru yang harus saya telaah satu per satu.
Di hari ke-3 saya bahkan hampir menyerah karena beberapa error yang disebabkan oleh elemen date-outer dan date-posts yang terus muncul dan tidak bisa hilang.
Tapi.. pada jam 1 tengah malam. Akhirnya, saya berhasil menemukan solusinya.
Saya balik penggunaan element mobile-posts dengan posts dan menghapus element posts.
Agak aneh memang kelihatannya, padahal blog dilihat menggunakan PC/Laptop. Tapi, script yang muncul adalah XML khusus untuk perangkat mobile.
Saya bingung awalnya, kenapa justru mobile-posts yang mau. Kenapa posts biasa tidak bisa.
Tapi ya sudahlah.. toh, pada akhirnya saya hanya perlu menyesuaikan kembali beberapa script CSS & XML yang awalnya masih tertuju pada elemen posts.
Ini daftar error yang sempat saya temukan & masih saya ingat:
- ✅ Fungsi flex pada post-card di halaman home tidak mau bertumpuk dengan benar.
- ✅ Slider menu pada perangkat smartphone tidak mau menutup disaat link-menu telah diklik.
- ✅ Slider menu pada perangkat smartphone tidak mau menutup disaat search-form telah diisi dan disubmit.
- ✅ Related posts & Disqus comment tidak muncul disaat artikel dipilih dari halaman home.
- ✅ Author box tidak bisa mengambil data penulis artikel secara otomatis.
- ✅ Tidak bisa menghapus sistem komentar bawaan Blogger.
- ✅ Tanggal pembuatan artikel tidak mau muncul di bagian post-meta halaman artikel.
- ✅ Meta structured data yang berantakan dan tidak terdeteksi.
- ❌ Tidak bisa mengubah format gambar menjadi WEBP secara otomatis.
- ❌ Tidak bisa loading blog menjadi seperti website Youtube & Medium. (Kemungkinan besar menggunakan AJAX).
✅ = Kelar.
❌ = Belum / tidak bisa selesai.
Kemungkinan besar, template ini masih akan saya kembangkan lagi. Masih banyak yang bisa saya explore dari sebuah template tanpa jQuery ini.
Saya juga butuh saran dari anda, bagian mana saja di blog ini yang masih perlu saya benahi (dalam hal desain).
Tolong beritahu lewat kolom komentar di bawah.
Untuk selanjutnya, kemungkinan besar, saya akan menambahkan beberapa CSS tambahan untuk code pre, kbd, dan blockquote.
Saya juga akan merapikan CSS & Javascript inline di blog ini sehingga nanti, hanya akan ada 1 tag <style> dan <script> saja.
Ini tampilan blog Saliwah per tanggal 3 Agustus 2020.
Hampir lupa, saya juga berencana untuk menggunakan variabel untuk mengganti kode warna di blog ini. Jadi nanti, jika ingin mengganti warna blog ini, cukup mengubah 1 baris script saja.
Ok, itu saja, curhat kali ini.
Btw, Kira-kira kalau saya juga template model begini, ada yang mau beli tidak ya?
