Tutorial kali ini Blogger Tune-Up akan mencoba membongkar Tata Letak (Layout) Template Blogger, dengan harapan mampu memberikan gambaran kepada para blogger bahwa membuat atau memodifikasi Template Blogger adalah bukan hal yang menyulitkan. Untuk memulai belajar, kita hanya perlu memahami sedikit (dulu) pengetahuan mengenai koding HTML (HyperTeks Markup Language) dan koding CSS (Cascading Style Sheet), tapi jangan kuatir kedepannya Blogger Tune-Up akan mencoba menyuguhkan tutorial HTML, XHTML, CSS dan bahasa Web Design lainnya lebih mendalam.
Sebelum kita memulai proses penelusuran Tata Letak (Layout) Template Blogger alangkah lebih baiknya persiapkan dulu peralatan pendukung supaya kita selalu bersemangat dan tidak mudah jenuh, diantaranya :
- Komputer lengkap dan koneksi internet
- Cemilan ringan
- Minuman berenergi
- Khusus laki-laki yang suka rokok jangan sampai kehabisan
Pada dasarnya Template Blogger hanya terdiri dari 2 (dua) bagian utama yaitu Head dan Body.
Head berisi tentang informasi website, kata kunci, dan beberapa pengaturan utama halaman website (misal; warna dasar, jenis hurup, posisi, dan lain-lain) bahkan bisa lebih kompleks dari ini semua. (Bingungkan....) Bagian Head merupakan pintu gerbang mesin pencari dalam memberikan informasi umum kepada calon pengunjung dan berpengaruh secara keseluruhan terhadap penampilan website. Bagian head dibuka dengan Tag
Body berisi hal-hal yang akan kita sampaikan kepada pengunjung (visitor) dapat berupa artikel, gambar, iklan dan hal-hal lain yang merupakan tujuan utama (isi) dari pemilik website. (Mulai pusing...) Bagian body dibuka dengan Tag
Head berisi tentang informasi website, kata kunci, dan beberapa pengaturan utama halaman website (misal; warna dasar, jenis hurup, posisi, dan lain-lain) bahkan bisa lebih kompleks dari ini semua. (Bingungkan....) Bagian Head merupakan pintu gerbang mesin pencari dalam memberikan informasi umum kepada calon pengunjung dan berpengaruh secara keseluruhan terhadap penampilan website. Bagian head dibuka dengan Tag
<head> dan ditutup dengan Tag </head>, kode yang terletak di antara Tag tersebut merupakan bagian dari head. Pada umumnya head terdiri dari dua bagian yaitu kode Meta dan kode CSS. (Tambah bingung lagi...)Body berisi hal-hal yang akan kita sampaikan kepada pengunjung (visitor) dapat berupa artikel, gambar, iklan dan hal-hal lain yang merupakan tujuan utama (isi) dari pemilik website. (Mulai pusing...) Bagian body dibuka dengan Tag
<body> dan ditutup dengan Tag </body>, kode yang terletak di antara Tag tersebut merupakan bagian dari body.Dibawah ini bagian dasar template blogger
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
<!-- SKIN CONTENTS -->
]]></b:skin>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>
Perhatikan Tag yang di highlight berwarna biru, itu merupakan bagian yang biasanya dimodifikasi/dibuat oleh para pembuat (desainer) template. Anggaplah diluar bagian yang berwarna biru adalah hal wajib yang tidak bisa ditawar untuk dimodifikasi. Untuk SKIN CONTENTS akan dibawah terpisah dalam tutorial CSS, sedangkan yang akan kita bahas jauh adalah bagian BODY CONTENTS. BODY CONTENTS berisi Section dan Widget.
Section adalah wilayah paling luar dari halaman website kita, seperti sidebar, footer, dan lain sebagainya.
Dekalarasi Section (Section Declaration)
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">Widget adalah elemen halaman individu seperti gambar, blogroll, atau elemen lain dari sebuah bagian elemen halaman. Kita dapat memasukan berbagai kode HTML disekitar section dari template.
</b:section>
Deklarasi Widget (Widget Declaration)
<b:widget id="header" type='HeaderView' locked="yes"/>Demikianlah sekilas mukadimah tutorial Tata Letak Template Blogger. Mudah-mudahan mulai pusing... :)
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
Tutorial selanjutnya : Template Blogger Tag b:section
