Tampilan Baru Blog Ijal Fauzi

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.

Blog Ijal Fauzi

Blog Ijal Fauzi

 

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)

Kepala halaman (header)

Kepala halaman (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

menu navigasi

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

Postingan terbaru

Postingan 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

kotak pencarian

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)

Bilah sisi

Bilah sisi

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

BIF

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

catatan kaki

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

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

biografi penulis

Biografi penulis

Biografi singkat

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

daftar blog

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

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

responsive web design

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.

30 Responses

  1. WELKAM BEK SOBAT IJAL FAUZY!!!
    Muncul dengan tampilan baru yang MANTAAAAFFF BANGEEET neh… bikinan Sendiri lagi… SALLUT!!

    Blognya ringan… juga udah Responsive neh..
    Ai Laikit SoMad!!
    ^_^

    1. Terima kasih sambutannya mas Bagio, komentar hangat yang seperti ini yang membuat saya rindu sama teman blogger πŸ˜€

      Ya, alhamdulillah saya bisa buat template ini sendirian meski memakan waktu πŸ™‚

  2. Selamat datang (kembali), walaupun seharusnya gw bilang begitu, karena gw sadar, blog gw udah jadi sarang tikus. πŸ™‚ Belakangan malah lebih seneng main di Tumblr yang gw rasa paling nyaman buat blog pribadi. malah curcol, hehe

    Gw salut sama template ini, terlebih yang bikin. Bisa detail banget dari atas sampai bawah, dari fitu ini ke fitur lainnya. Responsif pula. πŸ˜€

    Sip, lanjutkan πŸ™‚

    1. Haha, thanks sambutannya riz πŸ˜€
      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 !

    2. Jujur gw kebanyakan belajar, baca artikel blog-blog luar dan masih ngoding juga. Cuma kurang mood belakangan ini, hehe

      Dan alhamdulillah udah diunblock :p

    3. Sip, tapi kalo gua sendiri masih jarang baca artikel blog luar, ngga tau kenapa kadang lebih bertele, padahal lebih berbobot blog luar, ya blog Indonesia juga masih banyak yang berbobot sih.

      Yiha, pantesan aja kayanya lagi seneng :p wkwk

  3. Ijalfauzi : Migrasi dari abu-abu ke hitam blur …
    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 … πŸ™‚

  4. Aq suka warna gelapnya dan menu navigasinya jal 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 πŸ™‚

  5. yeah, template black. Se tema bro, yg bedain responsivenya wkwk. Susah2 gampang nerapinn querynya πŸ˜€
    tp lebih enak dilihat yg ini dr pd template black sy πŸ™

    1. Yup, harus teliti nerapin media queries nya, salah sedikit aja ngga bakalan bekerja tuh media queries. Alhamdulillah kemaren cek di samsung galaxy temen tampilannya udah sip, haha.

      Blog mas Alam juga bagus tampilannya rapi πŸ˜€

    2. iya bener, kudu teliti. Oh iya mau tanya, ini layout nya pake skala apa? persen atau em atau px? kalau make skala persen, dan berhasil sdh pasti ngikutin ukuran layarnya, tinggal diatur sedikit querynya hihi πŸ˜€
      wow, mantep dehh. Nyoba2 queries dlu dehh πŸ™‚

      thanks mas Ijal. Tp masih elegent blog mas Ijal (y)

    3. Blog ini ngga sepenuhnya pake persentase, sebagian besar pake persentase dan sisanya pixel, makanya rada rumit. Soalnya saya lebih suka pixel ketimbang persentase.

      Pixel harus lebih teliti nerapin media queries-nya dari layar besar sampe ukuran smartphone :/ kalo persentase sih enak bisa langsung menyesuaikan.

    4. kebalikan sama blog ane donk, layoutnya pake persen. πŸ˜€
      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 πŸ™‚