Mengenal struktur dasar kode body template blog

Postingan ini adalah kelanjutan dari postingan yang sebelumnya, namun disini kita akan memaparkan sedikit lebih kode-kode wajib yang ada di dalamnya saja. Dan kode template dibagian inilah yang akan ditampilkan dalam blog.

Untuk lebih mudah dalam pemahaman tentang postingan kali ini, alangkah lebih baik sobat juga membaca artikel tentang "Mengenal struktur dasar template blog" dengan tujuan dalam pemahaman tentang  "Struktur dasar kode body template blog" lebih mudah dipahami dan dimengerti.
Kode pada template Blogspot dibagian Body ditunjukkan pada kode dibawah. Kode disini memang tidak ditunjukkan secara lengkap karena memang tidak diperlukan untuk membuat template (hanya bikin pusing saja untuk memahami semuanya).  Kode yang ditunjukkan adalah yang sederhana yang penting untuk pembuatan template agar kita lebih mudah untuk memahami.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849<body> 
<div id='outer-wrapper'> <div id='wrapper'>

<!-- untuk text browser -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
 <b:widget id='Header1' locked='true' title='Testpage Two (Header)' type='Header'/>
 </b:section>
 </div>

 <div id='content-wrapper'>
 <div id='main-wrapper'>
 <b:section class='main' id='main' showaddelement='no'>
 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
 </b:section>
 </div>

 </div>
<!-- akhir content-wrapper -->

 <div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>
 <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
 <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
 </b:section>
 </div>

<div class='clear'>&#160;</div>
<!-- spasi untuk tampilan agar sidebar dan main punya ketinggian yang sama-->

 <div id='footer-wrapper'>
 <b:section class='footer' id='footer'>
 <b:widget id='Text1' locked='false' title='Blogger Template' type='Text'/>
 </b:section>
 </div>

 </div>
<!-- akhir wrapper -->

</div>
<!-- akhir outer-wrapper -->

 </body>

Abaikan kode yang berwarna hijau. Secara garis besar, tag yang ada didalam kode bodypembuka hingga bodypenutup dapat disimpulkan dalam 5 (lima) bagian:

No
TAG
Keterangan
1header-wrapperBlok header biasa di isi dengan judul/descripsi/logo 
dan lain-lain.lazimnya posisi header berada di bagian atas
2main-wrapperDidalam Main-wrapper terdapat blok Postblok Comment
Date Header, dan bagian lain yang dapat dibuat dari 
opsi Add Page Element.
3content-wrapperBlock ini ini adalah wadah dari main-wrapper.
4sidebar-wrapper
Block ini digunakan sebagai wadah widget/gadget blog atau
aksesoris misalnya About me, Link list, gambar slide, 
Javascript etc.
5footer-wrapperKegunaannya hampir sama dengan sidebar-wrapper, namun
yang membuat berbeda adalah hanya masalah peletakannya saja,
dan footer-wrapper berada di bawah

Dalam penjelasan struktur kode body, kita hanya akan merujuk pada pembungkus ke 5 (lima) yang paling penting dalam peranan website selain dari outer-wrapper yang mana berfungsi sebagai wadah utama pembungkus ke 5 (lima) elemen tersebut.

Dapat anda lihat setelah kode <div id='outer-wrapper'> saya menambahkan kode <div id='wrapper'>, nah yang unik dari wrapper adalah kita dapat mengoptimalkan melalui css. karena letak wrapper ini berada di dalam/setelah outer-wrapper dan ditutup sebelum penutup kode outer-wrapper.

Secara normal dalam pengaturan css tersebut dalam penempatan struktur elemen body, biasanya seperti ini
12345678910
body {background:black;}
#outer-wrapper {padding:0px;margin:0 auto;overflow:hide;width:1000px;}
#wrapper {background:#fff;width:100%;padding:5px;}
#header-wrapper { height:113px; width:960px; margin:0 auto; position:relative;}
#content-wrapper {border:1px solid #000;float:left;width:650px;padding:5px;background:#ccc;}
#main-wrapper {background:green;color:black;width:640px;}
#sidebar-wrapper {background:yellow;color:black;float:right;width:325px;}
#footer-wrapper {background:orange;color:black;width:1000px;}

Untuk peletakkan tag bagian body bisa sobat baca di artikel Berkenalan dengan CSS dan HTML di poin HTML

No comments:
Write komentar