Adhitya_y2k Blog: Anatomi Utama Tata Letak Template Blogger

Tutorial kali ini Saya akan sedikit menjelaskan Tata Letak (Layout) Template Blogger, dengan harapan mampu memberikan gambaran kepada para blogger bahwa membuat atau memodifikasi Template Blogger adalah bukan hal yang menyulitkan. tapi jangan kaget kalau nantinya saya juga bingung juga,, hhahaahahahahaha ,. ^___^

Untuk memulai belajar, kita hanya perlu memahami sedikit (dulu) pengetahuan mengenai koding HTML (HyperTeks Markup Language) dan koding CSS (Cascading Style Sheet).
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 <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[/*

]]></b:skin>
</head>
<body>

</body>
</html>
<data:blog.pageTitle/>

Perhatikan Tag yang di highlight berwarna hijau, 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">
</b:section>

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.

Deklarasi Widget (Widget Declaration)

<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>