Sebenarnya sudah lama saya ingin ganti template. Tapi belum sempat jadi kenyataan. Padahal saya sudah nyicil membuatnya sejak awal Ramadhan kemaren. Tapi kesibukan kerja membuat saya mengabaikan pembuatan template itu sementara waktu. Ditambah lagi sebulan yang lalu kakak paling akrab dengan saya pergi untuk selamanya. Butuh waktu yang cukup lama untuk saya kembali menata mental. Itu yang membuat template baru yang sedang saya kerjakan kembali terbengkalai.
Bagi yang sering berkunjung ke blog ini, pasti tahu bahwa sejak blog ini launching tahun 2022 lalu, saya masih tetap setia menggunakan template Viomagz. Template buatan Mas Sugeng ini sangat cocok untuk segala jenis blog. Baik itu blog personal, blog teknologi maupun blog bertemakan berita.
Template Viomagz ini sudah memenuhi segala aspek yang dibutuhkan oleh sebuah blog. Clean, Responsive, Fast Loading dan juga SEO Friendly. Pokoknya kita tinggal setting sedikit template nya, lalu fokus membuat tulisan. Ini yang saya lakukan beberapa tahun yang lalu sampai punya 3 blog yang di terima oleh Google AdSense. Iya, 3 blog saya tersebut menggunakan template Viomagz sejak awal.
Tapi saya punya prinsip "Sebaik apapun karya seseorang, tetap saja ada rasa kebanggaan tersendiri bila kita juga punya karya". Itu yang membuat saya punya tekad untuk mempunyai template karya sendiri.
Berbekal sedikit pengetahuan tentang CSS, HTML dan Javascript yang saya dapatkan waktu kuliah di Politeknik Negeri Bengkalis kemaren, saya mulai nyicil membuat template. Kalau saya menemukan jalan buntu, langsung saja saya bertanya dengan Google. Kalau Google tidak bisa memberikan jawaban yang jelas, saya langsung bertanya dengan ChatGPT. Tapi kalau ChatGPT juga bingung, saya langsung menggunakan opsi terakhir. Iya, bertanya dengan Mama Ghufron.
Loh, ehh
Masqoli alkaliyamafa,
Iii alakay yanaka
Syududu...
Ma faqoli inna
Yarasul alqoli inna kalyamafa
Mus, alas, alik, ala
Taqola yamafima allah
Sekilas Info
Setelah melewati proses yang cukup panjang (berdebat sama ChatGPT), akhirnya template yang saya inginkan lauching juga. Template ini saya beri nama Hatim Nova v1.0. Mungkin banyak yang akan bertanya kenapa namanya Hatim Nova. Kalau Hatim sudah jelas nama tengah saya, lalu Nova siapa? Apakah nama calon istri atau nama janda kampung sebelah?
Walaupun Nova itu mirip-mirip nama cewek, tapi sebenarnya Nova ini saya ambil dari istilah astronomi yang menggambarkan bintang yang bersinar terang. Saya merancang Hatim Nova ini untuk mencerminkan sesuatu yang baru, menonjol dan punya karakter sendiri. Dengan kata lain, template ini dirancang untuk memberikan "cahaya baru" pada tampilan blog - lebih modern dan berbeda dari yang lain. Tagline Hatim Nova - Clean. Fast. Modern.
Template ini di dominasi oleh warna biru. Bukan, saya bukan penggemar film biru. Tapi warna ini mengandung filosofi dan harapan. Iya, saya berharap bisa foto bareng kamu dengan background warna biru #Eeaaa
Lalu letak filosofi nya dimana, bang? Iya, nggak tahu. Saya cuma pengen terlihat keren doang kayak Pak Bahlil.
M..B..G.. - Mas Bahlil Ganteng
Buah apa yang paling manis? Buahlil
Tambah ganteng ajaaa...
MyLittle Bolu Ketan
Busyet! Saking kerennya Pak Bahlil, saya langsung hafal sama lagunya 😁
Oke, sekarang kita fokus kepada template yang saya rancang. Inilah bagian-bagian yang terlihat berubah.
Beranda
Awalnya saya menggunakan template yang lebarnya 1000px. Tapi Hatim Nova yang saya rancang hanya mempunyai lebar 700px. Bisa dibilang tidak terlalu lebar untuk sebuah template. Filosofi nya sudah pasti karena pria tidak suka yang lebar-lebar #Eh
Blog Post yang dulunya 5 sekarang masih tetap 5. Bedanya kalau dulu blog post yang tampil lengkap dengan thumbnails tapi sekarang saya hanya menampilkan judul postingan yang disamping kanannya ada jumlah komentar dalam lingkaran berwarna biru muda (#289eec).
Memang benar thumbnails postingan bisa membuat pengunjung penasaran sekaligus tertarik untuk membaca tulisan. Tapi entah kenapa saya pengen suasana yang baru sekaligus misterius. Hanya orang yang gabut saya yang akan membaca tulisan saya #Eh2.
Filosofi nya apa, bang? Kali ini nggak ada filosofi nya sama sekali. Murni karena pengen ganti suasana dan tampilan saja 😂
Untuk sidebar saya hilangkan agar fokus pengunjung langsung ke blog post. Tapi karena saya butuh tempat untuk menambahkan gadget, saya putuskan untuk membuat widget box kiri dan kanan dibagian bawah. Widget Box kiri saya isi dengan Popular Posts sedang Widget Box kanan saya isi dengan About Me dan Statistik.
Judul dan Logo
Awalnya Judul blog ini adalah Blog Mas Hatim dengan Deskripsi Bukan Blog Biasa. Tapi entah kenapa Judul blog ini kayak terlalu aneh gitu. Saya memang mempunyai darah keturunan Jawa dari sebelah Bapak, jadi wajar kalau ada kata Mas nya. Masalahnya, saya tinggal di daerah yang sebagian besar penduduknya adalah Suku Melayu. Jadi saya lebih sering di panggil Bang Hatim dari pada Mas Hatim. Kalau di panggil Mas Hatim kayak ada manis-manis nya gitu #Eh3.
Lalu Deskripsi blognya yakni Bukan Blog Biasa jauh lebih aneh lagi. Sudah kayak berkurban menggunakan nama pribadi tapi menggunakan APBN sebagai sumber dananya.
"Memangnya ada, bang?"
"Ada"
"Siapa?"
"Pokoknya ada"
"..."
Jadi saya putuskan untuk menggantinya dengan judul yang baru biar bisa mewakili saya secara umum. Sempat kefikiran menggantinya dengan Hatim Halilintar, Kata2Hatim atau Catatan Hatim Seorang Hatim. Tapi ujung-ujungnya saya berpendapat bahwa judul blog yang saya sebutkan barusan bukan cuma aneh tapi juga lebay 😅
Dan akhirnya saya memilih Ruang Hatim sebagai Judul blog ini. Terinspirasi dari kata Ruang Hati. Dan begitulah blog ini, akan menjadi Ruang tempat menampung tulisan yang saya buat dengan hati.
Sedangkan untuk Deskripsi blog, saya mantap memilih Menulis Pelan-Pelan, Bertumbuh Perlahan. Ada proses nyata dalam kalimat tersebut. Sebab memang kenyataannya didunia ini tidak ada yang benar-benar instan. Bahkan mie yang katanya instan pun tidak bisa langsung di makan dengan bungkus-bungkusnya.
Untuk logo yang awalnya tulisan Blog Mas Hatim berwarna putih dengan ukuran 224 x 43 saya ganti dengan banner berwarna biru ukuran 700 x 206. Banner ini saya buat menggunakan bantuan ChatGPT. Foto saya menggunakan toga, batik coklat dan seperti memikirkan ide untuk menulis dalam bentuk kartun menjadi karakter utamanya.
Menu Navigasi
Di template lama, saya menggunakan 2 tempat untuk meletakkan menu. Menu seperti Cerita, #Eeaaa, Opini, Kuliah saya letakkan di Menu Navigasi yang ada disamping Logo Blog. Sedangkan Menu seperti About, Nomor Rekening, Sitemap saya letakkan di Menu Bottom yang ada dibagian bawah template (diatas Footer).
Untuk Hatim Nova, saya merancang Menu Navigasi dengan prinsip hemat ruangan. Saya gabungkan semua menu disatu tempat yang sama agar lebih praktis. Saya jejerkan Menu mulai dari About, Contact, Payments, Sitemap dan Other. Menu Other ketika di klik akan muncul Sub Menu Cerita, #Eeaaa, Kuliah dan Opini. Masing-masing Menu dan Sub Menu saya tambahkan icon kecil disampingnya agar lebih manis.
Dari semua Menu yang saya jejerkan, mungkin Menu Payments yang cukup menarik perhatian karena blog personal jarang (mungkin tidak ada sama sekali) yang memasang Menu ini. Jadi, Payments ini adalah Halaman tempat berkumpulnya nomor rekening demi menghindari drama scroll galeri dan catatan setiap kali ada yang mau transfer.
Kadang saat ada teman yang mau bayar hutang, saya ribet sendiri mencari-cari nomor rekening di Notes ataupun Galeri. Biar tidak ribet, saya buat saja Menu Payments ini. Nanti kalau ada teman yang mau bayar hutang, saya cukup berikan link Menu Payments tersebut. Lumayan untuk ajang promosi blog 😎
Tidak lupa saya tambahkan juga Search Box yang didalamnya ada tulisan Hatim Search Engine. Mana tahu ada pengunjung yang butuh fitur ini. Walaupun sebenarnya saya sendiri pun sanksi.
Pagination
Dari banyaknya fitur yang ada di template blog ini, Pagination adalah fitur yang paling unik. Kalau di template sebelumnya Pagination nya berbentuk angka biasa, tapi di template yang saya rancang ini Pagination nya menggunakan Classic Google Style.
Tahu Pagination Google kan? Yang huruf o nya bertambah saat jumlah halamannya berubah. Misalnya jika halaman pencariannya berubah, Pagination Google akan berubah menjadi Gooogle dengan masing-masing angka yang menunjukkan nomor halaman berada dibawah huruf o.
Saya kefikiran membuat Pagination dengan konsep yang sama. Karena nama saya Hatim, maka huruf a nya yang akan bertambah ketika jumlah halamannya berubah. Misalnya ketika halaman blog saya jumlahnya 8 seperti saat ini, maka tulisan Hatim akan berubah menjadi Haaaaaaaatim dengan masing-masing angka di bawah huruf a nya.
Lalu bagaimana kalau halamannya lebih dari 10? Saya membatasi huruf a maksimal hanya 10 di satu halaman agar rapi. Kalau halamannya lebih dari 10, angka dibawahnya saja yang berubah. Kalau yang awalnya dihitung dari 1, tapi kalau halamannya nanti lebih dari 10, bisa saja dimulai dari angka 3 atau 5. Tergantung jumlah halamannya.
Butuh waktu 4 hari hanya untuk membuat Pagination seperti ini. Itupun sebagian besar diisi perdebatan dengan ChatGPT yang sering memberi coding error yang merusak tampilan Pagination.
Pagination ini masih memiliki banyak kekurangan. Baik tampilannya yang kurang rapi maupun cara menghitung jumlah halamannya. Sebab Blogger memang tidak support Pagination Number seperti Wordpress. Tapi bagi saya pribadi, Pagination ini sudah cukup lumayan. Hatim Pagination ini akan menjadi fitur unik yang akan diingat oleh pengunjung ketika mereka tersesat di blog hatim.web.id
Popular Posts, About Me dan Statistik
Hanya 3 widget ini yang saya pasang di blog. Popular Posts yang tampilannya biasa-biasa saja saya ganti dengan Popular Posts yang lebih modern dan kekinian. Masing-masing postingan saya masukkan kedalam card yang di ujung kanan atasnya ada angka mulai dari 1 s/d 5. Tergantung berapa jumlah postingan yang ingin saya tampilkan di widget Popular Posts ini. Popular Posts ini hampir sama dengan Related Posts yang saya buat. Bedanya di Related Posts, postingan yang saya tampilkan maksimal cuma 3 saja. Biar tidak terlalu banyak dan memberatkan loading halaman.

Widget About Me bawaan Blogger terlalu biasa. Hanya ada Foto, Lokasi dan juga Pengantar. Di template Hatim Nova, About Me bawaan Blogger saya sembunyikan. Saya ganti fitur yang sama dengan About Me yang lebih modern. Konsepnya mirip Company Profile atau Name Card. Selain Foto dan Pengantar, saya tambahkan juga 4 buah icon sosial media populer dan sebuah tombol yang saat ini bernama Download Hatim App. Kalau nanti blog saya mau dijadikan seperti Aplikasi Android, tombol ini akan digunakan untuk menyimpan link installer nya. Tapi untuk saat ini tombol tersebut belum berfungsi. Sebab saya merasa fitur ini masih belum terlalu penting untuk digarap.

Salah satu widget bawaan Blogger yang paling saya suka adalah Statistik. Walaupun blog ini saya buat hanya untuk menampung uneg-uneg. Tapi saya cukup senang jika ada pengunjung yang datang dan meninggalkan jejak berupa komentar. Cuma widget statistik bawaan Blogger cukup kaku. Hanya berisi angka dan grafik doang. Di template sebelumnya widget ini sempat saya modifikasi agar bisa menampilkan Posts, Comments dan Pageviews. Untuk icon nya masih menggunakan gambar biasa. Tipikal template jadul.
Di Hatim Nova, widget statistik yang telah saya modifasi sebelumnya saya upgrade agar lebih modern dan kekinian. Iconnya saya ganti dengan icon SVG. Hitung-hitung agar lebih ringan saat di load. Warnanya dominan biru terutama badge icon SVG nya agar lebih cocok sama warna template yang saya gunakan. Masing-masing label seperti Posts, Comments dan Pageviews saya masukkan kedalam card yang berbeda. Biar lebih manis dan enak di pandang.
Back Top
Sudah menjadi kebiasaan desainer template sekarang yang memasang tombol Back Top agar pengunjung tak susah-susah kembali lagi keatas saat scroll. Di template lama tombol Back Top hanya berupa lingkaran berwarna biru lengkap dengan icon segitiga ditengahnya.
Tapi di Hatim Nova, tombol Back Top saya modifikasi. Bahkan bisa disebut Over Modifikasi. Tombolnya saya ganti berupa Rocket berwarna biru dengan memanfaatkan icon SVG. Bukan hanya Rocket biasa tapi juga dilengkapi api berwarna kuning dan orange dibagian bawahnya. Saat di klik, Rocket nya akan meluncur keatas dengan sedikit getaran. Mirip saat astronot mau meluncur ke luar angkasa.
Comments
Kotak komentar standar di template lama saya modifikasi agar berbentuk card dan terlihat lebih modern. Tulisan Balas dan Hapus yang awalnya cuma link biasa dengan garis bawah saat di hover saya ubah menjadi tombol berwarna biru. Saya tambahkan juga emoticon agar kegiatan memberi komentar jauh lebih menyenangkan. Emoticon ini hanya muncul ketika blog dibuka lewat komputer atau laptop. Sedangkan saat dibuka lewat Hp, emoticon ini akan disembunyikan. Sebab di keyboard Hp sudah ada emoticon bawaan. Jadi biar nggak double emoticon nya muncul.
Emoticon yang saya pasang ini masih belum bisa di klik terus langsung muncul dalam kotak komentar. Masih menggunakan cara manual yakni klik dulu emoticon yang mau digunakan, kemudian salin kode emot yang ditampilkan kedalam kotak komentar. Jangan lupa letakkan 1 spasi terlebih dahulu. Misal Hallo [spasi] Kode Emot.
Ke depannya mungkin saya akan buat otomatis. Saat emoticon di klik, langsung muncul di kotak komentar. Mirip kayak klik emoticon menggunakan keyboard Hp.
Responsif
Kalau ditanya apakah Hatim Nova responsif? Jawabannya sudah pasti. Sebab sekarang banyak orang lebih suka membuka blog lewat Hp dibandingkan komputer atau laptop. Jadi responsif adalah fitur yang perlu disematkan agar pengunjung betah berlama-lama di blog kita.
Selain semua fitur saya buat responsif menyesuaikan lebar layar perangkat pengunjung, saya tambahkan juga Bottom Navigasi (Navigasi Bawah) untuk mempermudah pengguna mobile mengakses menu dengan satu tangan. Mirip-mirip seperti Aplikasi Android. Bottom Navigasi ini berisi Menu seperti Home, About, Contact, SItemap dan Other. Menu Other ketika di klik akan muncul Sub Menu Cerita, #Eeaaa, Kuliah dan Opini.
Selain fitur-fitur yang saya sebutkan diatas, di Hatim Nova juga saya sematkan Loading Screen Modern yang saat berpindah halaman pengguna akan disambut dengan animasi loading yang smooth dan terkesan profesional. Ada juga Scroll Progress Bar yang bisa menjadi indikator bagi pengguna saat membaca artikel. Fitur ini bisa membantu pengguna untuk mengetahui sejauh mana mereka telah kehilangan cinta membaca.
Walaupun template ini memiliki banyak sekali kekurangan dan celah, tapi saya bangga bisa membuat Hatim Nova menjadi template yang "gue banget". Saya tidak tahu kedepannya mau ditambahkan fitur apalagi. Tapi untuk saat ini saya sudah merasa cukup. Sekarang saya hanya fokus membuat tulisan. Sebab mengharapkan orang yang tidak mengharapkan mu itu melelahkan.
Test comment pakai emot :d
BalasHapusTest balas comment pakai emot juga :-)
HapusTiga kata buat template baru blog Mas Hatim: CUAKEP BANGET DAH! Asli, bikin pangling Mas. Yang lebih cuakep lagi adalah karena Mas Hatim bikin sendiri, kelihatan betul nih perjuangan dan cintanya buat si blog :)
BalasHapusTerima kasih banyak, Kak! Masih dalam tahap belajar (c)
Hapus