Dalam bagian keempat ini saya akan membahas mengenai bagian kode HTML template blog. Di bagian sebelumnya saya telah membahas mengenai Kode CSS template blog yang berguna untuk mengatur tampilan/layout template blog. Nah bagian kode HTML berguna untuk mengatur apa saja yang akan kita masukkan ke dalam template blog kita. Bagi anda yang sudah mengenal kode kode HTML bagian ini tidaklah terlalu sulit. Bagi anda yang baru saja atau belum mengenal HTML saya akan mencoba menjelaskannya, semoga penjelasan saya mudah di mengerti.
Sebenarnya seluruh kode kode yang ada diakun blog anda itu adalah merupakan sebuah dokumen HTML, termasuk didalammnya terdapat kode CSS. HTML sendiri adalah sebuah cara penulisan teks-teks agar nantinya apa yang telah kita tuliskan bisa dibaca oleh sebuah browser (baca juga pembahasan mengenai HTML). Dalam sebuah dokumen HTML harus terdapat beberapa bagian seperti berikut:
<html>
<head>
</head>
<body>
</body>
</html>
Beberapa baris kata diatas merupakan tag. Tag saya terjemahkan sebagai sebuah "penanda" dari bagian/elemen dari dokumen HTML dimulai dan diakhiri. Setiap tag harus berpasangan, tag pembuka dan penutup. Penulisan tag diantara tanda "<" dan ">". Untuk tag penutup kita menambahkan tanda "/" sebelum nama tag. Saya akan jelaskan sedikit satu persatu.
Tag <html>
Tag ini menandakan dan memberi tahu browser bahwa apa yang ada di antara tag pembuka dan tag penutup adalah sebuah dokumen HTML.
Tag <head>
Tag menandakan dan memberi tahu browser bahwa apa yang ada diantara tag pembuka dan tag penutup adalah bagian head sebuah dolumen HTML. Dalam dokumen HTML sebuah template blog didalam tag biasanya terdapat deskripsi blog dan kode-kode CSS. Kalau kita ingin menambahkan meta tag disinilah tempatnya.
Tag <body>
Nah tag ini adalah tag yang menandakan isi dari template blog kita. Apa yang ada diantara tag dan adalah isi dari template blog kita, misalnya header, sidebar, main, footer dll. Sekarang kita akan pelajari satu persatu apa saja yang ada di dalam tag . Saya kembali menggunakan template minima sebagai referensi. Tanpa mencentang Expand templatewidget coba cari kode berikut ini:
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers --> <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>
<!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div>
</div> <!-- end 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> <!-- end outer-wrapper -->
</body>
Untuk kemudahan, abaikan kode-kode yang berwarna abu-abu. Kode-kode itu adalah kode standar dari blogger. Inti dari kode-kode template blog terbagi atas empat bagian:
Perhatikan bahwa semua kode diatas pertama kali dibungkus oleh tag <body> lalu diikuti oleh tag <outer-wrapper>. Tag body merupakan standar dari penulisan kode HTML sedangkan tag outer-wrapper merupakan pembungkus/wrapper terluar. Penggunakan wrapper/pembungkus bertujuan memudahkan pengeditan (menambah atau menghapus elemen/bagian template). Didalam outer-wrapper kita memiliki tiga pembungkus besar, yaitu header-wrapper, content-wrapper, dan footer. Didalam Content-wrapper terdapat elemen main-wrapper dan sidebar-wrapper.
Outer-wrapper, header-wrapper, content-wrapper, main-wrapper, sidebar-wrapper, dan footer-wrapper disebut juga container. Di dalam container ini kita bisa menambahkan widget atau elemen lain. Seperti misalnya didalam header-wrapper
<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>
atau didalam main-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>
Penambahan widget bisa melalui halaman add page elemen.
Atau jika kita ingin menambahkan elemen lain kedalam salah satu kontainer juga bisa, misalnya kita ingin menambahkan area untuk banner didalam header maka kita tinggal menambahkan saja sebuah kontainer baru dengan menambahkan kode
<div id='banner-wrapper'>
<b:section class='banner' id='banner' preferred='yes'>
</b:section>
</div>
letakkan kode diatas di dalam tag header-wrapper sehingga menjadi seperti ini
<div id='header-wrapper'>
<div id='banner-wrapper'>
<b:section class='banner' id='banner' preferred='yes'>
</b:section>
</div>
<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>
Yang perlu diingat adalah untuk mengatur posisi/layout dari penambahan kontainer anda harus melakukannya di dalam bagian CSS. Penambahan sebuah kontainer atau elemen didalam bagian kode HTML hanya memberi tahu browser bahwa anda menambahkan sebuah elemen baru.
Silahkan anda mencoba mengutak atik sendiri kode-kode html. baik itu menambah atau mengurangi. dan ingat lebih baik jika anda menggunakan sebuah blog yang khusus untuk latihan atau save dulu template yang lama agar jika terjadi kesalahan anda bisa menggunakan kembali template yang lama.
Bagian berikutnya kita akan langsung aja praktek memodifikasi template. Ok segera meluncur ke bagian berikutnya.
02 March, 2009
Membuat Template Blog : Bagian Keempat
Subscribe to:
Post Comments (Atom)
Makasih, info nya sangat bermanfaat...
mantappp