Hello World, Lorem Ipsum 'This is My First Posting on My Own Design Blog'

Hello World! Hufffff Finally, selesai juga pekerjaan njelimet (rumit) yang menyita waktuku untuk membuat sebuah blog. Beberapa aktivitas musti ke-interrupt seperti ngegame dan watching movie lantaran ambisi yang menggebu-gebu buat ngedesain sendiri sebuah blog. Tapi semua itu tertebus sudah setelah kerja keras, banting tulang mouse (lantaran kesel sama koneksi yang lemot) membuahkan hasil juga. Akhirnya bisa posting juga dehhhh. I really design it from the scratch man!. Berikut beberapa tahapan yang harus aku jalani untuk bisa menghasilkan template pertamaku di Blogger.


Di dunia Luna Maya banyak sebenarnya yang menyediakan template gratisan yang bisa di-download dan tinggal dipasang diblog kita, lalu kenapa aku masih mau repot mendesain sendiri? Yang pasti ada alasan-alasan tertentu seperti :

1. semangat untuk terus belajar, hadisnya kira-kira seperti ini

Tuntutlah Ilmu dari Buaian sampai ke Liang Lahat

2. prestise, he..he... yang ini rada narsis. Tapi emang ada kepuasan tersendiri kalo punya blog theme  yang beda dari yang lain. Aku yakin kamu juga akan merasakan hal yang sama saat kita bisa membuat sendiri sebuah template Blog;

Jadi ngalor-ngidul (kemana2) omongannya, balik lagi ke tahapan membuat sebuah blog. Semoga bisa bermanfaat bagi yang juga mau mendesain sendiri template-nya (Blogger, Wordpress atau website lainnya).
Langkah-langkahnya sebagai berikut :

1. Tentukan banyaknya kolom template yang akan didesain (template yang aku desain merupakan template 2 kolom).
2. Buat sketsa struktur / bagian-bagian template seperti header, main wrapper, side wrapper dan footer. Untuk template dua kolom biasanya menggunakan satu side wrapper sementara untuk template tiga kolom menggunakan dua side wrapper. Contoh bentuk struktur sebuah template dapat kamu lihat di sini atau lihat juga di sini;
3. Setelah kamu menentukan akan seperti apa bentuk struktur templatemu maka coba berimajinasi untuk mengembangkan struktur template tadi dalam bentuk yang lebih menarik yaitu sebuah web template. Kamu dapat menentukan bentuk web template berdasarkan hobi ataupun content (isi) dari blog kamu. Jika kamu seorang jurnalis maka web template yang merepresentasikan dirimu sebagai seorang jurnalis akan tampak dengan adanya pena maupun kertas dalam web template tersebut, jika anda seorang penjual bunga maka template dengan bunga-bunga tentu akan sangat menarik. Template yang menampilkan tokoh kartun bagi pecinta kartun ataupun kartunis merupakan piihan yang tepat. Yah apapun itu minumnya tetap teh botol sosro, kamulah yang lebih mengetahui apa yang sreg di hati dan apa yang ingin kamu tampilkan dalam templatemu.
4. Menuangkan sketsa yang sudah direncanakan ke dalam bentuk vector menggunakan software (perangkat lunak) seperti Adobe Photoshop. Kalau kamu tidak sanggup untuk merogoh kocek untuk membeli perangkat lunak seperti Adobe Photoshop kamu dapat menggunakan perangkat lunak free (GNU) yaitu GIMP tersedia untuk versi linux, windows maupun OS X (macintosh).
5. Gunakan sistem 960 grid buatan Om Nathan Smith. Download filenya di sini. Dengan menggunakan sistem 960 grid ini template kamu akan presisi dan kamu mudah melakukan pengaturan dimensi karena sudah ada bantuan kolom-kolom kecil baik 12 kolom maupun 16 kolom sebagai panduanmu menentukan lebar main ataupun sidebar-mu dan bagian template yang lain;
6. Extract file 960 grid yang sudah kamu download dan gunakan sesuai perangkat lunak desain photo yang kamu gunakan (photoshop atau gimp);
7. I'm not an expert at all. To be honest aku bukanlah seorang ahli dalam desain dan juga bukan ahli dalam pemrograman. Tetapi mbah google selalu ada saat aku membutuhkan bantuan dan saat aku terdiam bukan karena lagi bertapa tapi karena emang lagi bingung. Saat aku bingung dan bengong kaya ayam kena akuk maka aku berusaha menemui mbah google untuk menerima wejangan-wejangan si mbah (lebay buanggettt). Tapi google emang membantu sekali, dengan algoritma-nya yang mempunyai kemampuan scaning file-file di dunia luna maya yang bejibun, mampu menampilkan artikel yang kita butuhkan. Beberapa situs yang menjadi referensi dalam desain template yang aku gunakan antara lain  sebagai berikut :

1. net.tutsplus.com, di situs ini dijelaskan step by step cara membangun sebuah web template dari nol;

2.  rounded image , step by step membuat rounded image

3. gimp tutorial tutorial desain template menggunakan Gimp. Dan banyak tutorial lain yang dapat kamu pelajari dari google

8. Web Template yang sudah selesai bisa kamu export ke format file gambar seperti *.jpg, *.png, *.gif dan format gambar lain yang didukung oleh aplikasi word wide web (www). Web template yang sudah aku convert ke file jpeg akan terlihat seperti gambar yang terlihat di bawah. Tapi satu gambar utuh seperti itu jika langsung diupload untuk menjadi template situs bisa dipastikan performance situs kamu akan lambat karena harus meload gambar yang begitu besar.
   

   

   my first template ever

   
   

9. Tahapan selanjutnya yang juga sangat penting adalah slicing atau memotong-motong file utuh gambar tadi menjadi bagian-bagian kecil yang akan dirangkai menggunakan kode program CSS, xml dan html. Tahapan ini sama sulitnya dengan saat kamu mendesain sebuah web template, perbedaannya adalah saat membuat desain dibutuhkan suatu imajinasi dan kreativitas untuk menghasilkan sebuah web template yang menarik, eye catching dan user friendly sementara untuk slicing dan coding dibutuhkan logika berpikir. Setidaknya bentuk pseudo code dari web template kamu. Langkah-langkah lengkap untuk memotong gambar lalu mengkode template dibahas di spyrestudios dan net.tutsplus. Kamu dapat mencari artikel lain di google untuk melengkapi tutorial atau perbendaharaan referensi dalam memotong dan membuat kode program;
10. Kalau kamu sama sekali tidak familiar dengan bahasa pemrograman web saya sarankan untuk "Menemui ibumu dan meminta maaf lalu kamu mandi kembang tujuh rupa". Just Kidding Bro, cuma mengingat masa lalu saat kuliah, salah seorang dosen yang paling killer selalu berujar seperti itu kalo mahasiswanya udah ga nyambung kalo diajarin kkkkkk (kacau, miss u so much elegant 02). Aku tidak terlalu kejam dan tega untuk mengungkapkan kalimat itu paling yang keluar dariku hanya "Wesss Pulang aja Ngangon Bebek, ga usah belajar desain template" wkwkwk... Lebih hancur. Tenang kita masih sama-sama belajar seperti yang aku bilang "i'm not an expert on programming". Yang terpenting dari semua itu adalah kemauan untuk maju, kemauan untuk bisa ( the power of can, katanya Pak Lek Obama yes we can), dimana ada niat disitu pasti ada jalan. Banyak tersedia buku-buku yang membahas tentang pemrograman web plus databasenya, kalau ga mau beli buku silahkan bengong lagi dan mengadu ke si mbah google.
11. Hello World and Lorem Ipsum. Pesan terakhir buat kamu yang memang mau menekuni atau menjadi seorang web designer dan web programmer adalah jangan bosan kalo ketemu kata "Hello World" seperti tutorial di blognya hendrawan, tutorial joomla, codepoint dan tutorial lainnya. Kata itu merupakan unwritten rule dari setiap kode pembuka suatu tutorial pemrograman web. Dan frase seperti "Lorem Ipsum" pasti akan kamu temui dalam setiap contoh template (lebay lagi....). Disamping kode html, css, xml maupun php, khusus untuk template blogger kamu juga harus mengerti widget dan tag yang ada di Blogger, untuk wordpress tinggal menyesuaikan.
12. Finally THis is It. Selamat Datang di www.bambangsupriadi.blogspot.com dan Selamat Mencoba langkah-langkah yang sudah dijabarkan secara garis besar. Untuk tutorial detail silahkan sabar menunggu tulisan-tulisan ku berikutnya.

My Best Regard

Bambang S.