6 Element Tags Menyusun Layout Template Blogger - Dalam sebuah template terdiri dari beberapa element penyusun untuk membuat layout suatu template.
Element tags itu bias di sebut kode HTML. Apa itu kode HTML??
HTML (Hyper Text Markup Language)adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. wikipedia
Element tags itu bias di sebut kode HTML. Apa itu kode HTML??
HTML (Hyper Text Markup Language)adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. wikipedia
Bahasa
HTML ini hanya bisa di baca oleh browser. Untuk melihat kode html suatu
website cukup dengan klik kanan lalu lihat source code atau lihat
sumber laman. Dengan cara itu sobat bisa melihat struktur html yang
digunakan suatu website itu. Dan dengan cara ini juga banyak pelaku yang
melakukan CLONING template web blog orang lain, tentu hal ini merupakan
tindakan kriminal.
Semua
elemen tags html itu tidak bisa hanya berdiri sendiri, ada beberapa
code lain untuk menyusunnya agar sesuai layout yang kita harapkan. Kode
yang digunakan untuk menyusun kode-kode html agar sesuai layout di sebut
CSS. Cascading Style Sheet (CSS) merupakan
aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga
akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa
pemograman. Untuk lebih jelas mengenai Tutorial CSS bisa mengunjungi
sumber terpercaya wikipedia.
Berikut 6 Element Tags Menyusun Layout Template Blogger:
1. Outer Wrapper
Merupakan
element paling luar dari kode html, dan ini paling utama yang harus ada
karena Outer Wrapper digunakan untuk menentukan tinggi lebar suatu
layout. Untuk penerapan biasanya seperti ini:
<body>
<div id="outer-wrapper">. . . . . . </div>
</body>
Kode CSS:2. Header Wrapper
#outer-wrapper { . . . . ;}
Fungsi dari header wrapper ini adalah untuk mengatur layout bagian header. Yang biasanya untuk nama dan iklan. Untuk penggunaan secara umum seperti ini:
<body>
<div id="outer-wrapper">
<div id="header-wrapper"> . . . . </div>
</div>
</body>
Kode CSS:3. Content Wrapper
#outer-wrapper #header-wrapper { . . . . ;}
Untuk fungsi element content wrapper ini saya kurang begitu jelas, namun secara prinsip ini sama dengan fungsi main-wrapper. Menurut saya ini bisa digunakan untuk pembungkusan main-wrapper dan sidebar-wrapper.
<body>
<div id="outer-wrapper">
<div id="header-wrapper"> . . . . </div>
<div id="content-wrapper"> . . . </div>
</div>
</body>
Kode CSS:4. Main Wrapper
#outer-wrapper #content-wrapper { . . . . ;}
Fungsi dari main wrapper ini adalah untuk tempat posting, biasanya terletak di bagian tengah. Untuk penggunaan secara umum seperti ini:
<body>
<div id="outer-wrapper">
<div id="header-wrapper"> . . . . </div>
<div id="content-wrapper">
<div id="main-wrapper"> . . . . </div>
</div>
</div>
</body>
Kode CSS:
#outer-wrapper #content-wrapper #main-wrapper { . . . . ;}
5. Sidebar Wrapper
Fungsi dari element ini pasti pada udah tahu, sidebar wrapper digunakan untuk penempatan widget atau fungsi dari fitur lain. Letak sidebar ini biasanya di sebelah kanan atau kiri. Untuk penggunaan secara umum:
Fungsi dari element ini pasti pada udah tahu, sidebar wrapper digunakan untuk penempatan widget atau fungsi dari fitur lain. Letak sidebar ini biasanya di sebelah kanan atau kiri. Untuk penggunaan secara umum:
<body>
<div id="outer-wrapper">
<div id="header-wrapper"> . . . . </div>
<div id="content-wrapper">
<div id="main-wrapper"> . . . . </div>
<div id="sidebar-wrapper"> . . . . </div>
</div>
</div>
</body>
Kode CSS:6. Footer
#outer-wrapper #content-wrapper #sidebar-wrapper { . . . . ;}
Fungsi footer ini biasanya untuk credit link atau informasi mengenai siapa pembuat template. Letak footer paling bawah. Penggunaannya seperti ini:
<body>
<div id="outer-wrapper">
<div id="header-wrapper"> . . . . </div>
<div id="content-wrapper">
<div id="main-wrapper"> . . . . </div>
<div id="sidebar-wrapper"> . . . . </div>
</div>
<div id="footer"> . . . . </div>
</div>
</body>
Kode CSS:
#outer-wrapper #footer { . . . . ;}
Dengan
mengetahui dasar-dasar dari tags element template kita bisa dengan
mudah melakukan editing template blogger dan membuat layout template
sederhana. Semoga artikel 6 Element Tags Menyusun Layout Template Blogger bisa bermanfaat untuk sobat dan pembaca.
2 komentar
Click here for komentarBagus!
ReplyTerima kasih..
Bagus petunjuk nya dan bermanfaat
ReplyConversionConversion EmoticonEmoticon