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.
<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'> </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
|
| 1 | header-wrapper | Blok header biasa di isi dengan judul/descripsi/logo dan lain-lain.lazimnya posisi header berada di bagian atas |
| 2 | main-wrapper | Didalam Main-wrapper terdapat blok Post, blok Comment, Date Header, dan bagian lain yang dapat dibuat dari opsi Add Page Element. |
| 3 | content-wrapper | Block ini ini adalah wadah dari main-wrapper. |
| 4 | sidebar-wrapper | Block ini digunakan sebagai wadah widget/gadget blog atau aksesoris misalnya About me, Link list, gambar slide, Javascript etc. |
| 5 | footer-wrapper | Kegunaannya 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
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
Sebelum utak-atik template, memang sebaiknya pemahaman tentang struktur pengkodean telah lebih dulu ada. Hal ini mungkin berguna untuk meminimalisasi kekeliruan dalam edit template.
BalasHapusNice poting, gan.
terima kasih sob, sangat membantu newbie seperti saya ...
BalasHapusterimakasih banyak sob, sangat membantu sekali tutorialnya....
BalasHapushttp://tokoonlineobat.com/