Pada dasarnya sebuah template memiliki Header, Sidebar 1 dan sidebar 2, Main-wrapper dan Footer.
Berikut ini merupakan contoh dari struktur dasar template:
<?xml
version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title> <!-- ini title blog -->
<b:skin><![CDATA[/* <<---- ini awal kode CSS/Skin
-----------------------------------------------
Blogger Template Style
Name: Project1
Designer: AnakBaik
URL: http://mdiery.blogspot.com/
----------------------------------------------- */
/* AREA KODE CSS */
body { /* disini nanti kode CSS untuk body */
}
#outer-wrapper { /* disini nanti kode css untuk outer wrapper */
}
/* Awal untuk kode css header wrapper
======================================================== */
#header-wrapper {
}
/* Awal kode css untuk block sidebar1 dan block sidebar2
======================================================== */
#sidebar1 {
}
#sidebar2 {
}
/* awal kode css untuk main wrapper dan posting
======================================================== */
#main-wrapper {
}
/* Awal kode css untuk footer wrapper
======================================================== */
#footer {
}
]]></b:skin> <!-- ini batas akhir css / skin -->
<!-- Disini bisa diletakkan kode javascripts -->
</head>
<body>
<div id='outer-wrapper'> <!-- Awal dari Outer Wrapper -->
<div id='header-wrapper'>
<!-- Ini untuk Wadah Judul dan keterangan Blog -->
</div>
<div id='sidebar1'>
<!-- Ini untuk Wadah widget blog sidebar1 -->
</div>
<div id='main-wrapper'>
<!-- Ini untuk Wadah posting, komentar atau kontent lainnya -->
</div>
<div id='sidebar2'>
<!-- Ini untuk Wadah widget blog sidebar2 -->
</div>
<div class='clear'> </div>
<div class='clear'/><!-- batas ruang dari outer: JANGAN DIHAPUS!!! -->
<div id='footer'>
<!-- Ini untuk Wadah isi dari footer -->
</div>
</div> <!-- Akhir dari Outer Wrapper -->
</body>
</html>
Sobat anak baik, dalam setiap menambahkan element harus disertai kode CSS supaya bisa mengkonfigurasi tampilannya, jadi ketika kita akan menambahkan widget harus ada pasangannya masing masing antara widget HTML dan CSS. Untuk lebih jelasnya sobat anak baik perhatikan kode :
<div id='header-wrapper'> pada contoh diatas merupakan pasangan dari kode CSS #header-wrapper { }
* Begitu juga dengan yang lainnya.
id ini harus bersifat unik maksudnya harus beda atau tidak sama, karena jika tidak beda maka template tidak akan bekerja dengan baik, malahan tidak akan berpengaruh pada perubahan template.
Seperti itulah kira kira dari isi kerangka sebuah template blogger, sobat tinggal menambahkan wigdet HTML ataupun kode Css sesuai keinginan sobat.
Semoga membantu.
Salam Blogger
wachh.. mantap neh,
BalasHapusbelajar Membuat Template Sendiri
tapi masih sederhana sob maklum taraf belajar
Hapuskeren keren.. sob
BalasHapusmasih bentuk konsep sob belum mengisinya css dan html sob
Hapussimpen dulu kapan kapan buat kreasi :)
Hapussilahkan sob, bisa bahan praktekan juga
Hapussya coba dulu ya sob
BalasHapus. . te ouw pe dachhhh,, . .
BalasHapusmumpung masih inget dan bisa berbagi sob
HapusWah mantap neh sob,,bisa untuk latihan membuat template sendiri,,,
BalasHapusiya sob itu juga hasil belajar otodidak, jadi ada yang kurang mohon maklum
Hapussy simpan..dulu sob... :)
BalasHapusnanti ta coba..trima kasih ya sdh berbagi :)
sama sama sob
Hapuswaw.... hebat hebat sobb.. udah tau sekarang struktur themplete .. hebat dehh pokoknya
BalasHapushasil dari belajar otodidak sob, kalau ada yang salah dimaklumi ya sob
Hapussaya juga masihh belajar kok sobbb
Hapussepertinya senior jauh lebih hebat ilmunya deh dari pada saya;)
Hapuskeren keren.... jadi tau sekarang ..
BalasHapusmakasi Infonya Sobb
sama sama sob, terimaksih juga sudah berkunjung
HapusPastinya Sobbb
Hapussalam persahabatan
HapusMantapss Sobb
BalasHapusOke dehhhh
Hapusoke juga :)
HapusMantap ne sob infonya...
BalasHapusterimakasih sob
Hapus