Struktur Dasar Template Blogger

Bagaimana cara untuk mengedit template dari blogger? Ini adalah salah satu diantara banyak pertanyaan yang sering muncul dibenak saya mungkin anda juga begitu, khususnya bagi para blogger yang masih baru berkenalan dengan dunia blog terutama yang pake blogger. Mungkin anda juga pernah berpikiran seperti saya, sebenarnya ini bukanlah hal yang baru lagi sudah banyak sekali blog yang menyediakan template secara gratis. Tapi kita hanya diberikan source codenya, padahal kita juga ingin membuat kreasi sendiri.


Saya sudah banyak minta bantuan dari teman-teman tapi mungkin lagi pada sibuk semua J, jadi saya putuskan untuk belajar sendiri dan mencari informasi kesana kemari yang pada akhirnya saya tuliskan diblog ini buat para pembaca semua.

Selain pertanyaan diatas saya juga berpikir bahwa, bukankah sudah saatnya kita mengenal struktur dari blog kita sendiri, tulisan ini khusus untuk yang menggunakan blogger saja. Nah tanpa banyak cerita lagi langsung saja kita bahas bagian-bagian dari blogger berikut ini:
Jika kita membuat blog baru maka mempunyai sebuah Header section , Sidebar-section, main-section dan Footer-section didalam section inilah blogger meletakkan widgets, yang merupakan page elements yang bisa dipilih dari tab template seperti terlihat pada gambar berikut ini:

ntuk lebih memahami setiap bagiannya saya menyertakan juga code untuk masing-masing bagian diatas. Untuk bisa melihat code itu, sebelumnya harus login dulu ke blogger, pilih blognya, layout, template, edit html.


Body – adalah seluruh bagian yang tampil pada browser termasuk Blogger Navbar, pada gambar diatas ditandai dengan warna merah.


body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Outer Wrapper – adalah berisi semua bagian dari blog, bagian ini ditandai dengan warna pink


#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Header Wrapper – adalah bagian paling atas biasanya berisi deskripsi dari blog, bagian ini ditandai dengan warna kuning.

#header-wrapper {
width:660px;
margin:0 auto 10px;
}
#header {
margin: 5px;
text-align: center;
color:$pagetitlecolor;
}


The Main Column – Bagian ini berisi postingan dan biasanya paling luas, pada gambar diatas ditandai dengan warna biru.


#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


The Sidebar/s – adalah bagian yang berada disisi dari The Main Column/postingan, untuk template 3-column biasanya berada disisi kanan dan kiri. Pada gambar diatas ditandai dengan warna hijau.


#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


The Footer – Posisinya berada dibagian paling bawah sejajar dengan Header Wrapper, ditandai dengan warna ungu.

#footer {
width:660px;
height:50px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Nah, sekarang kita sudah bisa mengerti dan memahami bagian-bagian utama dari blog kita, untuk selanjutnya akan dibahas mengenai cara membuat template 3-column. Saya sangat mengharapkan kritik, saran dari rekan-rekan yang sudah master dalam hal mengutak-atik template blogger.