Header baru, semangat baru - Header#1

Sesuai judul, postingan kali ini akan membahas mengenai header pada blog sederhana saya. Iyah baru, kan?, yihaaa, *salto. Senang bukan main, asli. Sudah lama mengidamkan blog pribadi saya ini memiliki header. Puji syukur akhirnya kesampaian juga. Menurut saya jadi semakin terlihat personal saja dengan memiliki header yang setidaknya mewakili pemilik blognya.

  *) Taraaaa, sudah jadi :)

Itulah desain akhir dari header blog sederhan saya untuk saat ini. Catat, tak bermaksud pamer loh, gak gitu. Sekeder berbagi kebahagian dan ingin bercerita mengenai pembutan dan pemasangannya sampai seperti yang terlihat sekarang. Prosesnya tidak mudah bagi saya. Mungkin faktor utama karena saya tidak begitu mahir dalam hal oprek HTML, CSS, JavaScript, jQuery, atau apalah teman-temannya. Maklum saja amatiran. Pegang mouse saja terkadang saya masih bergetar.

***

Desain headernya dibuat oleh sahabat saya, si Kiki. Berhubung saya pribadi tidak begitu menguasai tetek bengek editing foto. Paling bisanya menggunakan paint bawaan dari windows saja. Itupun masih kalah jauh dengan hasil gambar anak SD. Ya ampun Cho, bisamu apa coba?. Oleh karena itu, saya minta bantuan dia untuk mengeditnya. Karena saya tahu dia jago urusan begituan. Lebih lagi dia SMKnya jurusan Multimedia, makin yakin :).

Saat itu saya hanya memberikan berupa materi dari bahan dasarnya (sudah kayak mau buat kue) saja. Baik itu berupa beberapa contoh desain yang bisa dijadikan referensi, foto karikatur saya hasil buatan bang Shiro (admin Kartun Ngampus), dimensi headernya yang telah ditentukan sebesar 1600x292, pilihan warna dasar dominan biru langit dan tak ketinggalan kertas orat-oretan dari tampilan yang saya inginkan.

*) Itu bahan-bahan pembuatan kue headernya

Saya tidak ingin yang aneh-aneh sih, sederhana dan gak terlalu berlebihan juga. Tapi tentunya untuk menemukan rekaan ide perlu dikonsultasikan lagi sama Kiki, karena dia yang jago desain otomatis selera seninya lebih bagus ketimbang saya dan enaknya semuanya bisa dirikues, asik kan. Nanti tinggal terima jadi doang. *wenaaak

Seperti yang sudah terlihat sekarang, awalnya gak ingin menampakkan seluruh bagian tubuh dari karikatur saya itu. Melainkan hanya sampai sebahu saja, seperti misal header blog miliknya bang Dika. Soalnya saya agak risih dari keberadaan dan posisi tangan kiri yang ngacungkan jempol. Lah kok sudah kayak songong saja yak. Namun, menurut Bagus lebih baik dipakai keseluruhan. Kikipun berinisiatif akan membuat dua versi, tanpa dan yang menggunakan meja.

Sesekali saya menanyakan progresnya melalui sms. Sebenarnya sudah beberapa hari yang lalu, Kiki bilang “Sudah Cho, tinggal revisi”. Tapi entah belum sempat ke sana dan sekitar seminggu lebih kami gak bertemu. Dikarnakan perkuliahan juga sudah tidak ada. Jadi susah ngatur waktu untuk ketemu, selain di kampus. Alah Cho, sok sibuk saja!. Padahal jarak kosan kami terbilang dekat. Jadinya selama itu saya menggunakan gambar apa adanya untuk mengisi header di atas.

Baru kesampaian tadi malam, saya mendatanginya sekitar pukul 19.15 WIB. Wih, jreng-jreng-jreng,  hasilnya bagus, saya suka, yeyeye. Paduan warna awan dan hiasan rumputnya mempertegas bagian dasarnya. Dan gambar karikatur saya yang tadinya hanya ingin separuh badan (tanpa tangan), dia buat seluruhnya nampak kece juga kalau pakai bangku dan meja belajarnya. Selain itu detail dekorasinya terlihat adem ayem, sejuk. Yah, setidaknya itu menurut pendapat saya :P

Tapi coba deh, perhatikan di bawah kaki plang namanya. Ada bunga kan? jadi terkesan cewek banget yah dan percayalah itu bukan bagian dari permintaan saya. Tak lain karena yang ngedit Kiki, naluri kewanitaannya muncul, haha. Tapi saya gak mempersoalkannya, yang ada melihatnya saya berulang kali ketawa sendiri *weka weka weka. Toh diperhatikan masih sesuai dengan tanaman merambatnya. Atau suatu ketika jika saya ingin ngasik bunga ke cewek (alah pret), tinggal memetiknya dari sana, mudah kan!.

 

*) Ada yang mau? *sambil ngedipkan mata*

Setelah sedikit dilakukan revisi dari jenis font dan penulisan nama. Saatnya pemasangan dan menyesuaikan areanya yang dilakukan berulang kali gonta-ganti ukurannya. Jadi selanjutnya untuk mempermudah ukuran struktur di templatenya yang mengikuti hedaernya. Sampai detik itu tidak ada kendala berarti. Tapi bermula dari idelain yang membuatnya agak ribet. 

*) Awalnya gini cukup, menurut saya

“Kalau masih ada bagiannya, kepana harus dihilangkan?.”. Ujar Kiki menirukan perkataan Bagus.

Yah, seperti referensi yang saya peroleh dari blognya mbak Ranny. Si Bagus menyarankan untuk posisi kakinyapun ikut ‘menggantung’ pada bagian menu headernya. Dalam gambaran saya ada dua kondisi, pertama headernya berada di belakang si menu, dimajukan gak bisa. Merekayasa menu dengan tambahan potongan kaki akan rusak saat resolusi tidak selaras. Kedua, gambar saya dibuat terpisah dari headernya. Dengan membuat bagian tersendiri untuk menempatkan pada posisi seharusnya.

Kondisi kedua yang lebih mudah dilakukan. Tapi perkiraan saya salah, susah. Hampir sejam saya ngutak-ngatik script tuk sekedar menempatkannya di atas. Ah, beginilah kalau masih amatiran. Menyisipkan foto saja tak mampu mengangkatnya ke posisi yang ditentukan, meskipun top, posisiton sudah dipasang. Karena saya tidak membuatnya di dalam struktur templatenya, tapi pakai elemen dasar gadget (HTML/JavaScript).

Setelah berkutat cukup lama, akhirnya berhasil juga, taraaaa. *usap keringat di dahi. Ditemukanlah posisi yang ideal setelah berulang kali diuji coba, rinciannya terdiri dari:  z-index: 10000; top: 5px; position: absolute; right: 3%;. Legaaaah, kamipun bisa tersenyum puas, yeah.

Sebenarnya pada menu headernya juga memakai gadget, bukan dari bawaan templatenya. Dari sananya sih sudah bagus, eh tapi saya malah milih untuk menghapusnya. Title blognya juga, sama, dihapus. Untuk menghindari kemunculan lebih awal ketimbang headernya. Oleh karena itu, bagian atas dirombak tak lagi seperti bawaannya. Saya lakukan untuk mengimbangi tata letak dan tampilan yang menurut (lagi-lagi selera sendiri, dimaklumilah) saya kurang sreg. Kalau awalnya seperti ini:

*) Menu atas tetap berada di atas (fixed) dan tanpa area header yang cukup besar

***

Dengan menerapkan cara (amatir) seperti yang telah saya lakukan. Banyak sekali kerepotan yang malah hadir meskipun tampilannya mendekati dari yang saya inginkan. Imbasnya merepotkan sekali, seperti timbul:

Kekurangan:

1. Apabila koneksi internet yang digunakan lemot (seperti modem saya), maka kemunculan gambarnya tidak akan bersamaan dengan headernya. Plus, makin berat load pagenya.
2. Karena penempatan gambar karikatur dari gadget (bukan melalui struktur template), menjadikan fitur responsivenya tidak berjalan pada bagian ini.
3. Berlaku sama pada menu di bawah headernya. Karena selector keduanya yang terdiri dari #wctopdropcont dan #HTML9 (kalau gak salah, ragu yang ini) belum dikenalkan di bagian responsive styles.
4. Resolusi layar minimal menjadi 1280x600 px. (saya menggunakan 1366x768 px, gak berasa aneh :D). Jika tidak, tata letaknya akan terlihat berantakan. Solusi sementara saya mengaktifkan tampilan perangkat seluler, dengan pilihan “Tampilan Dinamis”.

Perbaikan selanjutnya:

1. Gambar karikatur akan saya potong menjadi dua bagian. Bagian pertama menyatu dengan header, selebihnya tetap akan dipasang menggunakan elemen gadget. Agar terlihat muncul bersamaan.
2. Penambahan selector pada bagian responsive styles di dalam template. Sepertinya ini yang paling (akan) banyak menyita waktu.

Hei, sudah kayak apaan saja yah. Itu mah urusanmu Cho!. Iyah, iyah, kan saya curhat:P. Berharapnya sih dapat solusi dari sahabat blogger yang lebih paham, hihi. Yah, semua ini akibat dari kesotoian saya main rombak ini-itu. Alhasil responsivenya gak mau jalan pada bagian header, meski yang ini toleransi karena masih bisa diperbaiki. Tapi pada bagian menu header dan gambar karikatur saya susah diperbaiki. Itu saja bikin kepala punyeng. Selebihnya akan dibahas pada postingan terkait selanjutnya.

***

Anyway, saya sangat puas dengan hasil editannya Kiki. Terima kasih banyak yah Kik. Hanya perlu sedikit permintaan ini itu dan selebihnya dia sudah mampu mengeksekusinya dengan baik. Eh iyah, nanti kalau ada perbaikan siap-siap saya minta bantuannya lagi *pasang tampang melas. Dan untuk Bagus, makasih yah sarannya. Benar katamu, ok juga mengeluarkan bagian kaki karikatunya menjadi seolah berada di atas menu headernya.

Berkat adanya header baru ini. Membuat saya semakin antusias dan bersemangat untuk ngeblog. Paling mendasar akan terus belajar memperbaiki olah kata, yang sejauh ini masih amburadul. Asli parah. Saya banyak belajar dari sahabat-sahabat blogger lainnya. Semoga saya bisa mengikuti jejak kalian. Jujur saja, saya semakin menikmati dunia blogging ini, tidak lagi menjadi blogger yang (dulunya) tega membiarkan blognya usang tanpa postingan. Kedepan saya berharap semakin banyak memperoleh pembelajaran dari apa yang saya lalui selama ini. Semoga :)

#to be continued..

Sabtu, 08 Februari 2014 / 10 Komentar / Label : Blog