Ulasan Tampilan Template C15 White V2 Black

Alhamdulillah akhirnya kemarin pagi 10 Juli 2013, selesai juga nih kreasi template saya yang kedua yang saya buat khusus untuk Chaidir’s Web. Setelah sebelumnya waktu pas launching saya juga sempet buat template C15 White Minimalist. Untuk yang kedua ini sebenernya saya masih makek source code template pertama saya, cuman lagi hampir banyak juga tampilan yang saya re-design dengan konsep baru. Proses pembuatannya lebih cepat dari yang pertama, tapi iyaa itupun karna saya masih newbie banget kayak ibaratkan telor yang gak sengaja netas gitu jadi untuk buat satu template gini aja bisa menghabiskan waktu sampai 3-4 hari juga lah. Hehehe.. 😀 Harap maklum. Cuman walaupun gitu saya malah jadi semakin tertarik untuk terus belajar.

Nah, dalam tulisan ini saya pengen sedikit mereview seputar tampilan baru dari Chaidir’s Web ini. Sebenernya template ini belum sepenuhnya lulus uji coba, niatnya saya pengen ngecek dulu dibeberapa resolusi/tampilan laptop soalnya saya buatnya dari tampilan Netbook 1024×768. Cuman saya gak sabaran kali. Pun belum tentu saya punya waktu kosong terus-terusan untuk ngurusin nih blog, disamping tugas di kampus maupun kegiatan saya yang lain apalagi ini di bulan Ramadhan. Jadi, makanya terpaksa saya langsung luncurin aja deh nih template. Kemarin saya sempet nge-check tampilannya di beberapa browser berbeda, ternyata CSS saya masih ada yang kurang support di Internet Explorer. Saya buatnya di Chrome, tapi untungnya di browser Firefox dan Opera masih support cuman yang dari browser Handphone lah yang belum saya atur tampilannya. Kalau menurut sobat ada yang gak pas tolong kasih komentarnya yaa… 😀

Template C15 White V2 Black (bacanya pakek English yooo biar keren dikit).
Kenapa sih kok namanya gitu??
C15 itu bisa dibilang identitas dari situs Chaidir’s Web dan nama saya sendiri sebagai pembuatnya yaitu @Chaidir15. Kalau 15 itu diambil dari tanggal lahir. Terus ada White dan Black, itu karena ditemplate ini hampir didominasi dengan kombinasi warna hitam dan putih sesuai dengan konsep dari Logo Chaidir’s Web sendiri. Yang V2 nya berarti ini adalah template versi yang kedua.

Di template ini saya banyak menggunakan Syntax Conditional Tag. Sehingga Chaidir’s Web memiliki 4 macam tampilan halaman yang berbeda. Alasan saya memakai konsep seperti ini, mungkin biar supaya sahabat gak bosen aja mandangin Chaidir’s Web. Kayak Blogazine yaa?? Menurut saya sih tampilan yang berbeda-beda itu gak selamanya mutlak dikatakan blogazine dan saya pun gak maksud kesitu. Kalau sekedar terinspirasi iyaa mungkin, selebihnya saya hanya memainkan peran kreasi dan imajinasi otodidak aja. 🙂

Dan keempat tampilan berbeda tersebut adalah yang macam berikut nih cuplikannya:

1. Homepage (Beranda Awal)
   

   Kalau sahabat berkunjung melalui alamat www.chaidir.web.id maka tampilan inilah yang akan pertama kali muncul. Bisa dibilang ini semacam cover depan dari Chaidir’s Web. Konsep nya saya terinspirasi dari tampilan search engine kayak Google dan Mozilla, alasannya karna blog saya ini pun sama juga halnya berfungsi untuk memberikan informasi wawasan dan pengetahuan. Facebook juga punya halaman awal, cuman karna sifatnya jejaring sosial maka yang pertama kali dimunculkan adalah form registrasi dan menu login. Seperti itulah kira-kira maksudnya halaman awal.

   Nah, fitur yang saya munculkan disini pertama ada Brand Logo dan Kotak Pencarian juga dibawahnya ada akun jejaring sosial saya serta ada link I’m Feeling Lucky yang jika diklik akan menuju halaman What’s Up berisikan pemberitahuan dan informasi terupdate. Seperti ini contohnya:

   

   Berikutnya ada Menu Navigasi dibagian atas, disitu terdapat 5 macam pilihan kategori konten/artikel yang ada di Chaidir’s Web. Dan disampingnya ada Jam Digital dengan format 24 jam. Terus di bagian bawah ada tulisan satu paragraf kan?? Itu saya sebut dengan Home News yang isinya nanti bisa berupa informasi penting, pesan selamat datang maupun kata-kata motivasi. Terakhir bagian footer ada Credit Template. Screenshot Home News 10/07/13:
   

2. Halaman Index (Daftar Konten)
   

   Halaman ini tampil hanya pada fitur pencarian atau index kategori/konten dari blog Chaidir’s Web, yang bisa diakses melalui alamat www.chaidir.web.id/search pokoknya yang ada pakek “/search” gitu deh. Disini saya menggunakan fitur Isotope (tombol Load) untuk menampilkan konten selanjutnya tanpa perlu me-loading ulang halaman secara keseluruhan. Dan susunannya emang sengaja dibuat berantakan ada yang tinggi ada yang pendek gitu karna saya menggunakan efek Masonry, dia menyesuaikan dengan bentuk gambar thumbnailnya (portrait atau landscape).

   

   Kalau dibandingkan dengan homepage perbedaannya ada dibagian atas dan bawah. Yang atas udah ada tambahan Brand Logo, Hari dan Tanggal serta Kotak Pencarian kecil. Fitur Pencarian disini beda juga dengan homepage, yaitu ketika kita menampilkan hasilnya dia gak me-loading ke suatu halaman tapi cuman menampilkan semacam kotak dialog hasil pencarian, mirip dengan di Facebook.

   Menu Navigasinya pun udah lain lagi isinya, yaitu:

   • Blog untuk melihat daftar konten keseluruhan dan terbaru didalam menu Blog ada juga menu berdasarkan kategori lagi didalamnya.
   • Archieve untuk melihat daftar konten keseluruhan cuman ditampilkan di satu halaman statis dengan fitur akordion.
   
   • Info untuk melihat halaman About Me dan informasi lainnya seperti My Chatbox, My Whistlist, My Facebook, My Twitter dan My Phone.
   • Book untuk melihat halaman Perpustakaan isinya adalah referensi buku-buku atau sekedar koleksi dan mungkin juga ada buku saya nantinya. 😀
   • Follow untuk mengikuti atau berlangganan blog Chaidir’s Web dan didalamnya juga ada beberapa daftar link yang saya tawarkan.
3. Halaman Item (Artikel Blog)
   

   Halaman ini bisa dilihat kalau sahabat masuk ke salah satu link artikel / tulisan di blog Chaidir’s Web. Seperti yang sekarang ini lhooh. 😀 Terkadang bisa aja sahabat berkunjung ke Chaidir’s Web tapi langsung ketemu halaman ini tanpa melewati dua halaman yang sebelumnya itu yaitu dengan hanya langsung meng-klik link yang saya promosikan di Facebook atau Twitter, iyaa kan?? Atau mungkin dari pencarian mbah Google.

   Secara design tampilan jelas beda jauh lah dengan halaman yang sebelumnya. Perbedaannya itu, kalau di halaman artikel ini menu bagian atas dan footer dibagian bawah udah gak ada. Sengaja emang!! 😀 Jadi, untuk gantinya saya hanya menampilkan Menu Sidebar di sebelah kiri yang letaknya fixed. Konsep ini terinspirasi dari tampilan Jurnal Precious sebelumnya. Masih ingat gak sob?? Kalau kemarin yang kenal blog ini dari alamat ceha-precious.blogspot.com dengan nama blog masih Jurnal Precious pasti tahu lah.

   Di Sidebar saya menggunakan fitur Akordion yang bisa membuka dan menutup ketika dipilih salah satunya. Isinya ada beberapa pilihan seperti Archieve, Popular Posts, Followers, Statistik dan Banner. Pilihan ini mungkin nanti bisa saja berubah. Diatas sidebar ada Hari, Tanggal dan Jam ini supaya sahabat yang berkunjung dan membaca tulisan di blog ini jadi tetep inget waktu dan supaya gak lupa hari ini tanggal berapa. 😀 Dibawahnya ada Brand Logo Chaidir’s Web.

   Menu Navigasi di halaman ini sengaja saya letakkan dibagian bawah tulisan, supaya sahabat bener-bener mau ngebaca setiap tulisan di blog ini sampe abes dulu. Heheheh.. 😀 Yang saya maksud adalah bagian ini:

   

   Tombol Blog untuk melihat halaman daftar konten secara keseluruhan seperti dibagian no. 2 tadi. Content dan Comments ini menu yang hanya bisa dilihat secara bergantian. To Top untuk berseluncur ke bagian paling atas dari Content atau pun bagian Comments.

4. Halaman Statis (Informasi atau Lainnya)
   

   Yang diatas adalah screenshot halaman statis dari menu Zona Kritis yang ada di pilihan INFO > My Chatbox. Jadi halaman statis ini dia khusus untuk menampilkan tulisan di laman (bahasa di ) atau page aja. Contoh alamatnya seperti ini www.chaidir.web.id/p/about-me.html terlihat disitu ada “/p” ini lah penanda alamat untuk setiap halaman statis di . Konsep halaman satu ini sebenernya belum sepenuhnya siap jadi nanti kalau sempet baru saya lanjutin lagi. Fitur menu Navigasi bagian atasnya pun masih sama seperti di halaman index cuman footer bagian bawah yang gak ada. Salah satu ide yang belum terealisasi, rencananya background halaman statis ini mau saya tarok gambar gitu. 😀

   Sebenernya pun ada satu halaman lagi yaitu Error Page, ini khusus untuk tampilan ketika ada keyword pencarian yang salah dan tidak ditemukan di blog Chaidir’s Web. Atau mungkin juga karna alamat yang sahabat ketikkan di addresbar ada yang salah. Ini dia Screenshot nya:

   

Oke sob, mungkin udahan dulu yaa ceritanya. Mudah-mudahan sahabat suka deh dengan tampilan baru Chaidir’s Web yang versi kedua ini. Atau kalau emang sahabat punya masukan atau kritikan pedas boleh juga tuh sampein aja lewat kotak komentar. Saya malah seneng banget kalau sahabat mau ngasi pendapat. Karna saya pun ngerasa masih banyak kekurangan yang perlu diperbaiki pastinya. Dan saya pun juga gak tahu, kira-kira sahabat nyaman atau betah gak nih main di Chaidir’s Web dengan tampilannya yang seperti ini?? Ayooo Jujur yaaa.. 😀 Saya tunggu jawaban dari Anda!! Iyaa Anda. Anda yang lagi baca tulisan ini. ^_^

Euyah, sebelum saya tutup sebenernya ada lhoh kesimpulan yang bisa diambil dari tulisan ini, mudah-mudahan bisa bermanfaat untuk sahabat yang udah mau ngebaca deh walaupun cuman sedikit. Ini dia: Pertama, mungkin tulisan ini bisa jadi semacam buku panduan gitu istilahnya. Cuman kalau di Chaidir’s Web inilah Manual Blogging nya. Hehehe.. 😀 Jadi, sahabat pun bisa bener-bener paham dengan setiap maksud dari tampilan di blog saya ini.
Kedua, tulisan ini sekaligus menjadi contoh tentang pengaplikasian Syntax Conditional Tag istilah dari kode Html yang dipakek para . Tapi, mungkin dilain tulisan saya baru bisa jelaskan cara makeknya gimana. Atau kalau sahabat penasaran silahkan searching aja di Google. 😀 Maksud dari Conditional Tag ini adalah kode yang bekerjanya berdasarkan logika kondisi tertentu. Karna itulah makanya saya bisa membuat tampilan yang berbeda-beda di berbagai kondisi halaman. Misal, di Homepage dan Index ada footer dibagian bawah, kalau di Halaman Artikel dan Statis bisa jadi gak ada muncul.

Sekian dulu sharing kita hari ini. Semangat Berkarya!! 🙂