Bagi para beginner blogger, mengenal dan memahami Kode Struktur dasar XML/HTML Template Blog/Website merupakan hal yang harus atau mutlak diketahui dan dipahami. Why? cuz dengan mengenal struktur dasar xml/html template blog akan bisa mempermudah dalam mengedit dan memodifikasi template. Contohnya seperti menambahkan header, kolom widget, footer dan lain sebagainya.
Struktur dasar XML/XHTML template blogger terdiri dari beberapa bagian, diantaranya header, body outer, main, post body, sidebar dan footer. Semua element ini dibungkus oleh beberapa tag, mulai dari yang terluar sampai yang paling dalam. Untuk lebih jelasnya, perhatikan gambar dibawah ini:
Mengenal Struktur Dasar Kode XML/HTML Template Blogspot:
<html>Penjelasan Tentang Tags !
<head>
Tempat untuk font script dan meta content
<b:skin><![CDATA[
Tempat CSS / Skin
]]></b:skin>
</head>
<body>
Tempat untuk content header, body, main, sidebar dan footer
</body>
</html>
1. Tag HTML
- Tag pembuka <html> dan tag penutup </html> merupakan desain awal (standard) untuk membentuk atau menciptakan suatu template atau design website yang didalamnya berisi semua element xml/html
2. Tag Head
- Diantara tag pembuka <head> dan penutup </head> terdapat tag title, skin/css dan script. Isi tag head ini merupakan bagian penting untuk membangun blog atau website seperti peletakan font, script, meta content dan css/skin. Posisi peletakan font dan meta content, biasanya di letakkan tepat di bawah tag pembuka <head> sedangkan untuk CSS/Skin diletakkan di antara tag pembuka<b:skin><![CDATA[ dan tag penutup ]]></b:skin>.
3. Tag Body
- Tag body ini merupakan tempat untuk menampilkan atau memvisualisasikan semua aktifitas blog, dan biasanya terbagi dalam 4 element utama, header (menu navigation), main-wrapper (post body), side-wrapper (widgets) dan footer (copyright atau credits)
Untuk menguraikan secara keseluruhan dan menggabungkannya menjadi template yang utuh, berikut kerangkanya.
<html>Demikianlah penjelasan singkat mengenai struktur dasar kode XML/HTML template blogspot, semoga dengan adanya penjelasan itu, bisa menambah pengetahuan anda semua. so, Terima kasih !
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
body {..............}
#header-wrapper {..............}
#content-wrapper {..............}
.post {..............}
.left-sidebar-wrapper {..............}
.right-sidebar-wrapper {..............}
#footer {..............}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- start content-wrapper -->
<div id='header-wrapper'>
<!-- widget header, description blogger-->
</div>
<div id='content-wrapper'>
<div class='sidebar' id='left-sidebar-wrapper'>
<!-- widget Sidebar Left-->
</div>
<div class='post-wrapper' id='main-wrapper'>
<!-- widget main-wrapper, post, comment and content-->
</div>
<div class='sidebar' id='right-sidebar-wrapper'>
<!-- widget Sidebar Right-->
</div>
<div class='clear'> </div> <!-- do not remove -->
</div>
<!-- end content-wrapper -->
<!-- start footer-wrapper -->
<div id='footer-wrapper'>
<!-- content footer-->
</div>
<!-- end footer-wrapper -->
</div>
</body>
</html>
0 komentar:
Posting Komentar