/* <pre class="brush: xml; wrap-lines: false;"> */
/* <pre class="brush: css; wrap-lines: false;"> */
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.
<body>
<div id='wrapper'> <div id='outer-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 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>
<!-- spasi untuk tampilan agar sidebar dan main punya ketinggian yang sama-->
<div class='clear'> </div>
</div> <!-- akhir content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Blogger Template | Bordr' type='Text'/>
</b:section>
</div>
</div>
</div> <!-- akhir outer-wrapper -->
</body>
Abaikan kode yang berwarna hijau. Secara garis besar, tag yang ada didalam kode bodypembuka hingga bodypenutup dapat disimpulkan dalam 4 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 | Sidebar-wrapper | Block ini digunakan sebagai wadah widget/gadget blog atau aksesoris misalnya About me, Link list, gambar slide, Javascript etc. |
| 4 | 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 di tutorial ini, kita hanya akan merujuk pada pembungkus yang paling besar yaitu outer-wrapper dan tidak membahas semua wrapper, diharapkan dengan memahami salah satu, yang lainpun dapat paham.
Untuk peletakkan tag bagian body bisa sobat baca di artikel Berkenalan dengan CSS dan HTML di poin HTML
didie wae atuh ujang
ReplyDeleteUlah pake link hirup atuh dodol
Delete