Kemarin kita sudah belajar dasar-dasar yang mesti Anda pahami sebelum melangkah ke dalam proses pembuatan template . Saya harap artikel pengantar sebelumnya sudah habis Anda baca. Untuk yang belum silahkan ikuti mulai Episode #1 – Belajar Cara Membuat Template Blogger. Sebenarnya pun mengandalkan itu saja masih belum cukup. Anda mesti banyak belajar sendiri juga. Semoga penjelasan pada tutorial ini bisa menjadi modal awal untuk Anda yang masih bingung dengan istilah coding, HTML dan CSS.  😀

Hari ini  saya akan coba menjelaskan beberapa hal penting. Mengenai langkah demi langkah yang perlu Anda ketahui agar bisa membuat sebuah template. Anda mesti tahu juga bahwa setiap template selalu memiliki format dengan susunannya masing-masing. Tentu ada banyak. Tapi disini kita akan menggunakan yang sederhana saja.  Kalau misal Anda ingin mengetahui lebih banyak macam-macam layout template, kunjungi situs penyedia template. Disana Anda akan melihat beberapa pilihan template yang bisa dipelajari.

Sekarang kita akan mulai tutorialnya. Di episode ini kita sudah memasuki ke materi yang lebih serius. Ada beberapa tahapan dalam proses pembuatan sebuah template. Simak baik-baik pembahasan berikut.

Merancang Tata Letak Elemen

Tanpa mengetahui gambaran menyeluruh dari template yang Anda inginkan, tentu akan sulit menciptakan tampilan yang menarik. Jadi, pertama-tama Anda mesti membuat rancangannya terlebih dahulu. Elemen apa saja yang ingin Anda munculkan nantinya. Lalu aturlah posisi letaknya dimana. Sebenarnya untuk merancang layout ini, bisa dengan menggambarkannya di kertas. Seperti menggambar sketsa coret-coret biasa. Jelek-jelek pun gak masalah yang penting ngerti bacanya.  😀

Sebagai contoh, saya akan membuat template dengan layout sederhana seperti ini:

contoh-layout-template-sederhana

Template ini menggunakan format dua kolom. Bagian konten yang menjadi fokus utama diletakkan di sebelah kiri. Dan disebelahnya kita letakkan dua buah sidebar atas bawah. Bagian atas template terbagi menjadi tiga bagian, pertama navigasi atas, tempat judul, dan navigasi menu. Lalu dibagian bawah template seperti biasa kita pasang footer.

Secara garis besar memiliki beberapa kondisi halaman tampilan. Umumnya ada empat macam:

  1. Halaman Beranda
  2. Halaman Pencarian
  3. Halaman Statis
  4. Halaman Artikel

Pada tutorial ini kita hanya akan membuat template dengan dua kondisi saja. Tampilan pertama untuk kondisi 1 dan 2 yaitu dengan memakai conditional tag Index. Lalu tampilan kedua berlaku untuk kondisi 3 dan 4, dengan conditional tag Item dan Static. Gambar yang diatas merupakan contoh layout untuk halaman artikel dan statis.

Oh yaa, tahap layouting ini juga ada hubungannya dengan proses untuk membuat template menjadi responsive nantinya. Jadi kita mesti pikirkan juga misalkan kalau ukuran layar browser berubah jadi lebih kecil, susunan templatenya mau dibuat jadi seperti apa? Jadi sebenarnya pada langkah ini, kita juga harus membuat rancangan layout dalam beberapa kondisi sekaligus. Di tutorial ini hanya satu kondisi saja yang akan kita bahas.

Membuat Gambaran secara Visual

Membuat template sebenarnya terbagi dalam dua proses. Yang satu merupakan bagian pekerjaan seorang Web Design dan satunya pekerjaan Web Developer. Pertama tukang design membuat gambaran visual lalu tukang coding mengubahnya ke dalam format HTML. Kira-kira begitu. Di tutorial ini saya gak akan membahas bagaimana kerjaan si tukang design. Saya percaya bahwa Anda bisa berkreasi sendiri. Untuk menciptakan visual template yang menarik sesuai dengan selera masing-masing. Hasil akhir dari tahap design ini disebut Mock Up.

belajar-membuat-template-mock-up-design

Terkadang bisa saja antara gambaran visual yang kita buat dengan hasil jadinya agak berbeda. Karena memang proses yang sulit adalah mengubahnya ke dalam bentuk HTML. Jadi, saran saya disini sebaiknya Anda membuat design yang sederhana saja dulu. Gak usah yang terlalu ribet dan ngawur. Ntar yang ada malah bingung sendiri. Sesuaikan dengan kemampuan CSS yang sudah Anda pelajari. 😀

Pada langkah ini pekerjaan kita mirip seperti dengan langkah membuat design poster, brosur dan lain-lain. Kalau Anda mahir Photoshop pasti mudah. Dari sini nantinya kita bisa mendapatkan informasi secara jelas tentang tampilan yang mau dibuat. Beberapa point penting diantaranya :

  • Menentukan warna dalam hexa (contoh: #555555).
  • Memperkirakan ukuran elemen, lebar, tinggi, jarak antar elemen dsb.
  • Menentukan ukuran font dan jenisnya.
  • Menyiapkan gambar, background, icon jika diperlukan dsb.
  • Melihat susunan tampilan secara keseluruhan, jika kurang pas lebih mudah untuk proses editing.

Menyusun Struktur HTML Template

Sekarang kita masuk ke tahap coding. Proses membuat struktur HTML ini bisa dibilang mirip seperti menyusun puzzle. Beberapa elemen kita susun dengan menggunakan tag-tag HTML yang notabene hanya berupa susunan text. Supaya lebih mudah membayangkan layout diatas, berikut saya sudah highlight dengan warna yang berbeda untuk masing-masing bagiannya.

contoh-design-template-tahap-coding
Yang warna biru di sebelah kanan dan kiri itu adalah margin.
Yang saya maksud ada dua kolom, perhatikan rata dengan content adalah kolom 1.
Sedangkan yang rata dengan sidebar adalah kolom 2.
Notasi angka sebagai keterangan baris. Notasi huruf keterangan itu adalah bagian elemen.

Jadi, di template ini saya membuat 5 (lima) bagian utama sebut saja ada 5 baris. Yang nantinya disetiap baris akan diisi oleh beberapa elemen. Kelihatan gak lima baris yang saya maksud? Jadi setelah Anda memahami letak, posisi dan ukuran dari setiap elemen seperti penjelasan dua tahap sebelumnya, maka pada tahap coding ini Anda harus bisa mengingat nama-nama (ID & class) dari setiap elemen tersebut. Karna dari nama-nama itu lah kita mau menciptakan tampilan sesuai dengan gambar.

Ingat! Pada prinsipnya, kita baru bisa mengatur tampilan dari suatu elemen, ketika elemen tersebut memang sudah disusun di bagian tag Body. CSS kerjanya hanya bisa memanggil nama yang sudah dideklrasikan oleh struktur HTML yang kita buat. Setelah semua elemen disusun pada bagian tag Body, barulah kita tinggal main-main di CSS-nya saja. Paham? 😀

Perhatikan kembali gambar diatas. Dari kelima baris yang ada, tiga diantaranya memiliki dua elemen dalam satu baris. Itu berarti kita perlu membagi ukuran lebar dari tiap baris tersebut menjadi dua kolom.
Baris 1 ~>      #topbar didalamnya ada elemen A dan B.
Yang saya beri nama sebagai class topnav dan sosmed.
Baris 2 ~>      #headbar hanya punya elemen header. 
Baris 3 ~>      #menubar memiliki elemen subnav dan search.
Baris 4 ~>      #mainbar memiliki elemen content dan sidebar.
Baris 5 ~>      #footbar terdapat elemen credit. 

Pada langkah ini sebenarnya tugas Anda adalah untuk menyusun elemen-elemen tersebut ke dalam struktur HTML. Masih ingat tentang bagian utama yang wajib dimiliki dalam sebuah template? Yaitu tag head dan body. Disini kita akan membuat beberapa elemen DIV dengan menggunakan nama atribut class dan ID-nya masing-masing. Sebelumnya saya sudah jelaskan bagaimana cara menggunakan tag DIV disini, bagi yang belum baca silahkan pelajari dulu.

Oke, sebelum saya tunjukkan susunan HTML yang akan kita buat, saya akan jelaskan dulu tentang bagaimana caranya agar Anda bisa membuat dua kolom pada template. Setelah Anda paham penjelasan ini, untuk membuat template dengan tiga kolom pun saya rasa gak ada masalah.

Membagi Ruang Menjadi Dua Kolom

Ada beberapa cara yang bisa digunakan untuk menciptakan ruang dua kolom pada template. Cara yang sama pun juga bisa diterapkan pada postingan Artikel untuk membuatnya menjadi dua kolom. Tapi disini kita hanya akan menggunakan untuk membuat layout saja. Yang menjadi persoalan pada contoh kasus kita sekarang adalah :

  1. Kita ingin membuat dua elemen supaya bisa berada dalam satu baris.
  2. Kita juga mau membuat jarak tepi antara kanan dan kirinya terhadap layar.
  3. Kemudian membuat posisinya supaya berada di tengah-tengah.

Bagaimana caranya? Simak baik-baik penjelasan berikut.

Contoh 1. Membagi Dua Kolom dengan Bungkus Luar

cara-membuat-dua-kolom-pada-template

Berikut ini susunan HTML yang digunakan:

<div id='menubar'>
   <div class='wrapper'>
<div class='subnav'>

</div>
<div class='search'>

</div>
   </div>
</div>

Lhoh kok ada elemen wrapper disini?? Itu darimana datangnya??
Sebenarnya bagian ini hanya sebagai elemen pembantu saja. Fungsinya mirip seperti bungkus luar atau wadah. Dengan adanya elemen bungkus ini, kita bisa membuat ruang yang memiliki ukuran tetap dan mudah juga untuk disesuaikan menjadi responsive nantinya.

#menubar dibuat 100% sebagai penyesuai ukuran lebar layar. Elemen wrapper 1000px sebagai ukuran standard pengguna notebook (10″ – 14″). Wrapper menggunakan margin: 0  auto artinya antara atas dan bawah tanpa jarak sedangkan kanan kiri dengan jarak otomatis. Jadi misalkan template dibuka dari layar 1366px, maka wrapper akan menyesuaikan sendiri agar margin kanan dan kiri dibagi rata, sehingga posisi elemen pas berada di tengah. Hampir mirip dengan fungsi text-align: center.

Di template ini nantinya saya ingin membuat elemen sidebar berukuran 250px (standart untuk letak iklan/banner). Karena saya sudah mengatur wrapper 1000px maka saya pun bisa menggunakan ukuran sidebar dalam nilai 25%. Sama saja kan hasilnya. Cuman lagi keuntungan penggunaan nilai persen disini, misalkan kapan-kapan lebar elemen mau kita rubah, tinggal ganti ukuran wrapper-nya saja. Kalau mesti ganti tiap elemen kan lebih repot. Karna wrapper ini merupakan atribut class dari tag DIV, maka dia bisa dipakai berulang-ulang. Kita bisa pakai sebagai bungkus untuk baris-baris yang memerlukan pembagian dua kolom. Jadi iyaa begitu, satu elemen ini bisa mengatur ukuran beberapa elemen sekaligus.

Contoh 2. Membagi Dua Kolom dengan Margin Luar

cara-membagi-ruang-menjadi-dua-kolom-pada-template

Berikut ini struktur HTML-nya :

<div id='menubar'>
<div class='subnav'>
</div>
<div class='search'>
</div>
</div>

Kalau dilihat dari hasilnya, memang kelihatan sama. Tapi ketika ukuran layar browser berubah misalkan diperkecil lebarnya, nanti akan kelihatan bahwa cara kedua ini lebarnya ikut berubah juga. Semakin kecil iyaa jadi kecil. Semakin besar layar, besar pula perbandingan ukuran kedua elemen tersebut. Ini dikarenakan ukurannya dalam satuan persen (%).

Nah, kalau gitu ubah aja jadi piksel kan bisa? Iyaa bisa. Cuman tampilannya jadi agak kurang enak dilihat nanti. Kalau misalkan ukuran layar lebih kecil, akan ada muncul overflow-x atau scrollbar dibagian bawah. Karena lebar template melebihi ukuran layar browser. Memang cara pertama pun juga akan memunculkan overflow x, tapi munculnya setelah ukuran layar lebih kecil dari 1000px. Dalam tutorial ini nanti kita hanya menggunakan resolusi layar minimal 1024×600 dan 1366×768 piksel sebagai patokan, jadi untuk cara yang pertama sejauh ini No Problem!!

Saya sudah siapkan bahan Latihan untuk Anda. Klik tombol demo dibawah untuk melihat bagaimana perbedaan antara contoh 1 dan contoh 2. Anda juga bisa men-download source HTML kode tersebut lewat tombol download berikut. Diakhir tutorial ini saya akan berikan tugas buat Anda.

Bahan Latihan Langkah #4 – Membuat Dua Kolom
contoh-menubar-dua-kolom-pada-template-chordian
Contoh tampilan #menubar dua kolom menggunakan cara pertama (bungkus luar)

Oke, kesimpulannya persoalan kasus diatas sudah selesai. Jadi sekarang kita sudah bisa menyusun struktur HTML awal seperti berikut ini:

<body>
<div class='outer-wrapper'>
<div id='topbar'><!-------- Baris 1 -->
<div class='wrapper'>
<div class='topnav'>

</div>

<div class='sosmed'>

</div>
</div>
</div>

<div id='headbar'><!-------- Baris 2 -->
<div class='wrapper'>
<div class='header'>

</div>
</div>
</div>

<div id='menubar'><!-------- Baris 3 -->
<div class='wrapper'>
<div class='subnav'>

</div>
<div class='search'>

</div>
</div>
</div>

<div id='mainbar'><!-------- Baris 4 -->
<div class='wrapper'>
<div class='content'>

</div>
<div class='sidebar'>

</div>
</div>
</div>

<div id='footbar'><!-------- Baris 5 -->
<div class='wrapper'>
<div class='credit'>

</div>
</div>
</div>
</div>
</body>
Bahan Latihan Langkah #3 – Menyusun Struktur HTML

Mengatur Tampilan Elemen Dengan CSS

Sampai pada langkah keempat, kita sudah mendeklarasikan elemen-elemen dengan nama atribut nya masing-masing. Seperti yang Anda lihat, struktur HTML diatas jika dijalankan lewat browser pasti tidak akan muncul apa-apa. Begitulah kira-kira jika sebuah template belum diatur tampilannya menggunakan CSS. Dan memang di setiap elemen belum ada isinya sama sekali. Untuk membuktikan bahwa file tersebut bekerja, coba Anda edit dengan menuliskan text pada bagian tertentu.

Berbekal dengan materi Pengenalan CSS yang sudah kita bahas sebelumnya, paling tidak Anda sudah bisa sedikit-sedikit mengerti bagaimana cara menyusun kode-kode CSS pada template. Sekarang saya mau Anda bereksperimen sendiri. Coba-coba saja. Masih ingat rumusnya kan? Kalau lupa coba baca lagi tutorialnya. Pasang selector sesuai dengan nama atribut setiap elemen. Baru tentukan properti yang mau digunakan serta value-nya mau dibikin apa. Bisa kan?

Oke, berarti langkah kelima ini saya anggap sudah selesai. Hehehe. ^_^

Oh yaa! Mungkin kemarin materi Pengenalan CSS di episode kelima belum begitu lengkap. Jadi saya akan berikan tambahan materi untuk Anda. Tapi cuman penjelasan singkat saja yaa. Yang penting Anda harus paham cara membaca dan menuliskannya.

Cara membaca nilai Margin dan Padding

Margin itu jarak suatu elemen dengan elemen induknya. Sedang padding itu jarak suatu elemen terhadap elemen child didalamnya. Lalu apakah ada hubungan terhadap ukuran width dan height dari elemen tersebut? Kalau Anda mau elemen tersebut berukuran 250px, lalu Anda menambah margin kanan kiri 10px. Maka jadinya elemen ini sudah memakai 270px dari ukuran yang tersedia pada layar. Kalau padding? Silahkan coba sendiri.

#menubar { margin: 10px 20px 5px 20px }

Artinya, elemen ini memiliki besar jarak keluar terhadap bagian atasnya 10px, kanan 20px, bawah 5px, kiri 20px. Ingat arah mutarnya jarum jam.

Kalau cuman ada 3 nilai, berarti jarak kanan kirinya sama sedangkan atas bawah beda. Kalau ditulis cuman 2 nilai, berarti jarak atas bawahnya sebesar nilai pertama dan jarak kanan kirinya sebesar nilai kedua.  Kalau 1 nilai saja yang ada? Berarti jaraknya sama semua.

TUGAS – Mengatur Tampilan Template Dengan CSS

Untuk bisa menyelesaikan langkah kelima, saya mau Anda bereksperimen sendiri. Gunakan dua file yang sudah saya berikan. Anda tinggal edit file tersebut menggunakan aplikasi editor HTML seperti Notepad++, setelah selesai save. Kemudian jalankan lewat browser Anda. Lalu edit lagi dengan pengaturan CSS yang lain, dan jalankan lagi. Perhatikan setiap perubahan yang terjadi pada tampilannya. Saya rasa Anda bisa belajar sesuatu dari sana.

Pertama, pelajari dulu bahan dari Langkah #4 – Membuat Dua Kolom

Disana saya sudah menyertakan contoh 1 dan contoh 2. Untuk #mainbar silahkan Anda buat sendiri pengaturan CSS nya. Coba gunakan satuan piksel untuk contoh 2, seperti apa perbedaan ketiga baris tersebut? Pelajari juga bagaimana kalau misal Anda mau membuat template dengan layout tiga kolom!

Kedua, pelajari bahan Langkah #3 – Menyusun Struktur HTML

Karena tampilan di browser masih terlihat kosong, bagaimana caranya supaya template terlihat seperti susunan layout yang kita inginkan? Kalau bisa buatlah menjadi seperti gambaran layout pada langkah pertama diatas. Caranya? Tentukan besar width dan height. Kemudian gunakan background agar tiap baris elemen bisa kelihatan.

Ah, yang bener aja?? Masak ngajarin ilmu gak sampe tuntas begini sih?? Saya kan pemula. Belum ngerti banyak soal CSS.” -_-

Oke, tenang! Saya akan menjawab pertanyaan dan persoalan diatas itu nanti setelah kita sampai di episode selanjutnya. Kalau misalkan saya langsung kasih tahu semua bentuk kode HTML yang sudah jadi, kapan Anda belajarnya??

Atau mungkin Anda juga bisa membaca terlebih dulu artikel berjudul Belajar HTML Dasar untuk Pemula. Bagi Anda yang baru memulai belajar coding web saya rasa artikel tersebut juga bisa membantu.

Jika ada masalah tanyakan saja lewat kotak komentar dibawah. 😀
Semoga pembahasan hari ini bisa bermanfaat.

Selamat Mencoba!!

NEXT!! Episode ke-7
Membuat Menu Navigasi Blog, Sosial Media dan Search