Kembali Menulis dengan Tampilan Baru
Alhamdulillah, setelah cukup lama saya tidak menulis blog ini karena beberapa hal, kini saya mulai menulis lagi. Kekosongan tulisan di blog ini berawal saat minggu-minggu sebelum ujian akhir smester 2 dilaksanakan, dengan alih-alih ingin meningkatkan nilai akhirnya saya tinggal dulu blog ini, mulai dari tidak menulis artikel baru hingga saya tutup blog ini untuk sementara.

Sebenarnya, saat hari-hari UAS berlangsung juga saya masih sering masuk dasbor, tapi ini lain ceritanya karena dasbor yang saya masuki adalah dasbor WordPress. Nah, sebenarnya ini alasan utama mengapa blog ini ditutup sementara dan dinomor duakan. Ingin sekali saya mengerti dan bisa menggunakan wordpress self hosting, mengerti disini bukan hanya bisa login, menulis artikel, komentar, selesai. Tetapi, mengerti secara keseluruhan agar keinginan untuk migrasi tidak sia-sia. Browsing sana-sini mencari referensi belajar, bertanya kepada Rizqy juga sering kali membantu saya. Pada akhirnya, keinginan untuk pindah ke WordPress self hosting saya batalkan. Karena saya merasa belum cukup ilmu dan biayanya. Setelah itu saya kembali membuka dasbor blogger. Malas, rindu akan tanggapan teman ditiap artikel yang saya tulis, dan bosan dengan tampilan yang tidak karuan membuat saya ingin (lagi) untuk merubah total desain blog ini. Akhirnya segala perasaan itu kini telah tergantikan dengan rasa senang dan puas dengan Tampilan baru Blog Ijal Fauzi. Postingan kali ini hanya sebagai dokumentasi saja, silahkan tinggalkan postingan ini karena mungkin tidak penting bagi anda 🙂 Berikut ini beberapa detail tampilan baru BIF :
- Kepala (header)
- Menu navigasi
- Artikel terbaru
- Kotak pencarian
- Bilah sisi (sidebar)
- BIF
- Catatan kaki
- Post footer
- Biografi singkat
- Daftar blog
- Footer
Ulasan
Desain tampilan kali ini hampir keseluruhan menggunakan warna gelap, yaitu kombinasi antara warna #212121, #111111, #222222, #1c1c1c dan beberapa warna gelap lainnya. Ini terjadi karena saya ingin menyesuaikan dengan warna judul blog ini yang saya buat dengan Moonshine Effect. Meski Bang Randy berpendapat bahwa “blog dengan warna gelap itu memang keren, tapi mudah dilupakan pengunjung”, saya tetap pada prinsip saya untuk tetap membuat tampilan dengan warna gelap.
Kepala (header)

Seperti yang saya katakan diparagraf sebelumnya, saya menggunakan gambar sebagai judul blog pada bagian kepala (header). Saya membuatnya menggunakan photoshop dengan mengikuti tutorial di Tutorial9.net. Ya, belakangn ini saya sangat tertarik mempelajari photoshop. Tepat dibawah judul terdapat sebuah kalimat deskripsi Wadah opini, dokumentasi dan cerita ringan. Saya memilih deskripsi itu karena sepertinya sesuai dengan konten yang ada di blog ini.
Menu Navigasi

Untuk mempermudah pengunjung dalam menelusuri blog ini, maka saya sediakan menu navigasi halaman. Saya menggunakan gambar ikon yang juga saya buat sendiri di photoshop, karena itulah bentuk ikon-ikonnya tidak sebagus dengan ikon-ikon karya website penyedia ikon yang ada. Tetapi saya senang menggunakan karya saya sendiri. Menu navigasi ini saya buat simpel dengan sedikit modifikasi menggunakan pseudo element dan CSS transisi. Terdapat pilihan ke beranda, tentang, arsip, kontak dan halaman obrolan sebagai ruang ngobrol para pembaca BIF untuk bertegur sapa dan mencari teman, silahkan bergabung.
Artikel Terbaru

Daftar artikel terbaru saya buat 2 kolom, tujuannya sih supaya bisa menghemat tempat saja. Beberapa kali saya coba untuk menerapkan jQuery masonry karya David Desandro, tapi gagal. Saya juga sudah tanya-tanya ke Bang Andre tetap saja gagal karena sepertinya penerapan masonry tidak cocok dengan struktur tampilan blog ini.
Kotak pencarian

Sebenarnya ini hanya pelengkap saja, daripada sebelah kanan dari menu navigasi hanya kosong, jadi saya isi dengan kotak pencarian. Padahal artikel di blog ini masih bisa dihitung dengan jari, yaitu baru mencapai belasan artikel.
Bilah sisi (sidebar)

Sidebar sepertinya bagian yang penting juga dalam sebuah blog selain area postingan. Karena itu saya juga membuatnya pada blog ini. Disitu terdapat BIFartikel (artikel terbaru), BIFcorner (kategori artikel), BIFavorite (beberapa blog teman) dan BIFopini (komentar terbaru). Semuanya saya perhemat dengan sedikit sentuhan jQuery untuk memanipulasi supaya tidak terlalu banyak memakan area. Silahkan klik masing-masing judul sidebar untuk melihat isinya. Judul tiap sidebar menggunakan teknik Lettering.js untuk penegasan pada karakter 1-3.
BIF

Mungkin beberapa dari teman sekalian bingung apa itu BIF. Tulisan BIF sering muncul dibeberapa kalimat dan sebagai judul pada sidebar. BIF adalah singkatan dari nama blog ini. Sengaja agar mudah disebut dan diingat saja.
Catatan Kaki

Pada beberapa artikel, terdapat catatan kaki sebagai penunjuk sumber, referensi atau segala sesuatu yang berkaitan dengan artikel yang sedang dibahas. Dengan tujuan, pembaca bisa tahu lebih jauh mengenai informasi yang sedang dibahas dalam artikel.
Post footer

Post footer menyajikan informasi tentang postingan. Dia memuat informasi mengenai penulis artikel, tanggal diterbitkannya artikel, kategori artikel dan follow button akun twitter penulis, yang belum follow saya silahkan follow terlebih dahulu (promosi).
Biografi

Sekedar pelengkap, saya membuat tentang pemilik blog ini yaitu saya sendiri di bagian panel sebelah kiri. Tujuannya, supaya pengunjung tahu siapa yang bertanggung jawab atas segala konten yang ada disini. Disitu juga terpampang rapi sebuah foto orang keren dibalik blog ini.
Daftar blog

Tepat disebelah area biografi singkat, terdapat daftar blog yang saya miliki ataupun blog yang saya tulis. Mungkin bisa menjadi alternatif bacaan pagi para pengunjung yang ingin menelusur lebih jauh.
Footer

Footer hadir sebagai bagian paling bawah halaman sebuah web/blog. Biasanya diisi dengan hak cipta (copyright) dan sebagainya. Tapi saya sadar, blog ini bukan sepenuhnya karya saya, meski desain baru ini benar-benar saya buat sendiri, tetapi saya juga masih jelajah sana-sini sebagai referensi. Ini saja masih gratisan di blogger. Maka dari itu saya tidak mencantumkan copyright, hanya mencantumkan judul dan deskripsi blog ini saja.
Responsive web design

Setelah 3 hari saya menerapkan beberapa teknik responsif dengan media query, akhirnya (insya Allah) blog ini sudah responsif, paling tidak blog ini sudah tampil baik di browser dengan resolusi lebih kecil, gadget dan mobile phone. Saya juga ingin minta bantuan, jika ternyata belum responsif dilayar yang anda gunakan, silahkan beritahu saya.
Penutup
Sepertinya itu saja ulasan mengenai tampilan baru blog ini. Benar adanya terkadang semangat ngeblog suka naik-turun. Saya salut sama orang-orang yang bisa konsisten dalam menulis di blognya. Terima kasih telah membaca postingan ini, mohon maaf jika bahasannya terlalu panjang.
Muncul dengan tampilan baru yang MANTAAAAFFF BANGEEET neh... bikinan Sendiri lagi... SALLUT!!
Blognya ringan... juga udah Responsive neh..
Ai Laikit SoMad!!
^_^
Ya, alhamdulillah saya bisa buat template ini sendirian meski memakan waktu :)
Gw salut sama template ini, terlebih yang bikin. Bisa detail banget dari atas sampai bawah, dari fitu ini ke fitur lainnya. Responsif pula. :D
Sip, lanjutkan :)
Ya meskipun jadi sarang tikus, coding tetep jalan bukan? Hahaha, kemarin juga sempet ke tumblr lu, makanya gua tau curcolan lu yang minta di unblock dari doi :p
Sip, makasih riz !
Dan alhamdulillah udah diunblock :p
Yiha, pantesan aja kayanya lagi seneng :p wkwk
Oya mas, mas punya domain banyak ya....? dari mana tuh? :D
Randy : Migrasi dari biru ke coklat kayu ...
Sendiri : Migrasi dari hitam blur ke abu-abu kombinasi ...
Hemmm, sedang pada mark wajah warna baru ya ... hehe ... :)
tapi ya itu koneksiku yang merakyat jadi agak berat pas loadingnya. Tapi ntar kalo udah penah dibuka juga bakalan cepet kok kan kesimpen di cache.
Bagus kok templat nya :)
Sip, makasih yo!
welcome back ! :D
tp lebih enak dilihat yg ini dr pd template black sy :(
Blog mas Alam juga bagus tampilannya rapi :D
wow, mantep dehh. Nyoba2 queries dlu dehh :)
thanks mas Ijal. Tp masih elegent blog mas Ijal (y)
Pixel harus lebih teliti nerapin media queries-nya dari layar besar sampe ukuran smartphone :/ kalo persentase sih enak bisa langsung menyesuaikan.
He'em, susah kalo pixel dibuat responsive *menurut saya. Tapi kalau persen tinggal dipasang class nya di queries..
Btw caranya biar jadi tombol trus diklik jadi menu di navigasi blog ini gmn? waktu dikecilin browsernya, menunya jadi kayak gtu, namanya apa ya? thanks before :)
- Menu navigasi responsif
- Menu navigasi responsif (versi dropdown)
Author profilnya pakai panel ya?