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.

<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

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


Terkait dengan ini

3 komentar:

  1. Sebelum utak-atik template, memang sebaiknya pemahaman tentang struktur pengkodean telah lebih dulu ada. Hal ini mungkin berguna untuk meminimalisasi kekeliruan dalam edit template.
    Nice poting, gan.

    BalasHapus
  2. terima kasih sob, sangat membantu newbie seperti saya ...

    BalasHapus
  3. terimakasih banyak sob, sangat membantu sekali tutorialnya....

    http://tokoonlineobat.com/

    BalasHapus

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML