Mengenal struktur dasar Template Minima

Minggu, 28 Juni 2009
struktur dasar template Pada dasarnya template standar dari Blogger terdiri dari beberapa kolom atau element yang mempunyai fungsi masing-masing dan di rancang agar dapat di rubah ukurannya sesuai kebutuhan, element itu terdiri dari :
  1. Body seluruh bagian yang tampil pada Browser termasuk Navbar atau Navigasi bar dimana sobat dapat melihat icon dari Blogger, navbar sendiri berfungsi untuk memudahkan kita melakukan sign atau sigout dari halaman blog.
  2. Outer Wrapper element yang membungkus element Header wrapper, Main wrapper, Sidebar wrapper, dan footer wrapper.
  3. Header Wrapper element teratas yang terdapat di dalam element Outer wrapper. Di dalam element header inilah kita meletakkan judul serta Deskripsi/keterangan dari blog yang kita kelola.
  4. Main Wrapper Terletak persis di bawah header, pada gambar diatas Main wrapper berada di sebelah kiri sidebar. Nah, di main wrapper inilah nantinya semua postingan yang kita buat akan ditampilkan serta komentar dari pengunjung blog kita nanti.
  5. Sidebar Wrapper adalah element yang biasanya di gunakan untuk memuat Widget seperti, Profil, Arsip, Iklan, dan lain lain. Letak nya ada di sebelah kanan element Main wrapper yang dapat sobat lihat pada gambar diatas.
  6. Footer Wrapper adalah element yang ada dibawah main dan sidebar, fungsinya hampir sama dengan sidebar, atau dapat di gunakan sesuai keinginan si empunya blog.

Semua elemen diatas sebenarnya merupakan rangkaian dari kode CSS dan HTML sehingga dapat membentuk seperti kolom-kolom seperti digambar. untuk yang sudah familiar dengan kode dari keduanya yaitu css dan html pasti bukanlah hal yang sulit untuk melakukan edit pada template. Berhubung saya hanya tahu sedikit mungkin gak ada salahnya saya mencantumkan kode CSS dari element yang saya sebutkan, Untuk melihat kode css dari element diatas silahkan sobat login dulu ke Blogger.com, setelah berada di DASBOR pilih Rancangan, lalu edit HTML, di bawah ini adalah kode css standar dari Template Minima Orchre :

Body
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Outer Wrapper
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$endSide;
font: $bodyfont;
}
Header Wrapper
#header-wrapper {
 width:660px;
 margin:0 auto 10px;
 border:1px solid 
 $bordercolor;
}
Main Wrapper
#main-wrapper {
width: 410px;
float: $endSide;
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 */
}
Sidebar Wrapper
#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}
Footer Wrapper
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Demikian sedikit kode dari element atau kolom dari template minima, harapan saya mudah mudahan dapat bermanfaat untuk sobat pemula yang ingin membuat blog di Blogspot.

0 komentar (Mengenal struktur dasar Template Minima)

Posting Komentar

Mohon berkomentar sesuai topik posting di atas !