Bagi para pemula blogger, mengenal dan memahami Kode Struktur dasar XML/HTML Template Blog/Website merupakan
hal mutlak yang harus diketahui dan dipahami. Mengapa? karena 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>
<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>
Penjelasan Tags !
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)
<html>
<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>
Demikianlan penjelasan singkat mengenai struktur dasar kode XML/HTML
template blogspot, semoga dengan adanya penjelasan tersebut diatas, bisa
menambah pengetahuan anda. Terima kasih !
terimakasih sob aku jadi tambah paham cara buat template sendiri
ReplyDeletekunjungi balik http://hbiepwidjaia.blogspot.com
info yang sangat menarik gan, bisa buat referensi, terima kasih ya :-)
ReplyDeletenice info gan...lumaya bisa nambah ilmu...hi hi maklum masih newbie
ReplyDelete