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. Baca juga artikel saya cara memasang robots.txt di blog. Jika ada kesalahan mohon di koreksi dengan meninggalkan komentar di bawah. Terima kasih :)
Sponsored by:
0 comments:
Post a Comment