Membuat template blogger merupakan salah satu pekerjaan yang susah-susah gampang , template blogger menggunakan platform HTML/XML, untuk itu saya akan membahas membuat template blogspot dengan XML/HTML version agar dalam panduannya tidak membingungkan dan mudah dipahami oleh siapa saja yang mengikuti saya bagi dalam beberapa sub bagian yang akan posting secara berkala.
Dokumentasi :
Pertama kita harus memiliki pola atau gambaran seperti apa template yang akan kita buat, nah di sini kita akan membuat sebuah template untuk blogspot 3 kolom dengan rincian elemen laman Header, Block Sidebar1 dan Sidebar2, Main-wrapper dan Footer, masing-masing block tersebut nanti sebagi wadah tampilnya konten widget, dan keperluan lainnya (hal ini dimaksudkan agar kita lebih mudah dalam membuat template). agar lebih mudah untuk diidentifikasi dikemudian hari maka template ini akan saya beri nama Blogger2Go..!!!
1. Pertama kita harus mempersiapkan Struktur Dasar Template tersebut, disini kita akan membuat template langsung diblog secara Online dengan maksud agar langsung bisa dilihat hasilnya, untuk itu buatlah satu blog baru jangan menggunakan blog yang aktif, karena saya tidak bertanggung jawab dengan kerusakan apabila kamu menggunakan blog yang aktif.
2. Kalau blog sudah jadi silahkan masuk ke halaman Edit HTML dari blog yang baru saja dibuat tadi
- Klik Blog Yang Dibuat
- Klik Template
- Klik Edit HTML
- Akan muncul sebuah peringatan dalam kotak kuning klik saja Proceed / Lanjutkan
- Maka akan terlihat kode HTML template blog kamu.
- Hapus semua kode tersebut kemudian ganti dengan kode Struktur Dasar Template Blogger Versi XML dibawah ini
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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 judul blog -->
<b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name: Blogger2Go
Designer: U-sup
URL: http://u-sup.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 -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</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>
- Simpan template dan lihat blog (untuk keterangan lanjut dari kode tag diatas bisa dibaca di sini)
- Hasilnya masih kosong karena belum ada isi tunggu artikel berikutnya....!!!
Informasi Penting Membuat Template Blogger
Dalam setiap penambahan sebuah element juga harus disertai dengan kode CSS untuk mengkonfigurasi tampilannya, jadi ketika menambahkan widget baru harus ada pasangannya masing-masing antara Widget HTML dengan CSS. Dari kode diatas bisa dilihat bahwa :
Pemanggilan ID HTML dan CSS
- <div id='header-wrapper'> memiliki pasangan pada kode CSS yaitu #header-wrapper { }
- <div id='sidebar1'> memiliki pasangan pada kode CSS yaitu #sidebar1 { } begitu juga yang lainnya.
Jika akan menggunakan sebuah CSS untuk pemanggilan lebih dari satu element kamu harus mengganti <div id= menjadi <div class= dan juga merubah prefix pada CSS menjadi tanda titik (.) bukan tanda pagar (#)
Contoh :
CSS : #sidebar1 { }
HTML :
<div id='sidebar1'>
</div>
Maka bisa diganti dengan metode pemanggilan class bukan id
CSS : .sidebar1 { }
HTML
<div class='sidebar1'>
</div>
perubahan terjadi pada kode yang saya cetak biru.
Semua Elemen harus diawali dengan tag pembuka dan diakhiri dengan tag penutup, tanpa tag pembuka atau tag penutu sebuah HTML tidak akan berjalan sama sekali atau percuma.
Tag pembuka ditandai dengan < dan penutup ditandai dengan </
Contoh 1:
<div class='sidebar1'>
</div> << ini adalah tag penutup dari div
Contoh 2 :
<title><data:blog.pageTitle/></title>
<title> : Tag pembuka
</title> : Tag penutup
Itu merupakan langkah awal dari membuat template blogspot, posting ini masih bersambung dalam beberapa bagian lagi jika tertarik silahkan bisa ditunggu kelanjutannya. Bila ada kejanggalan dengan artikel diatas atau mungkin hal yang kurang jelas untuk dimengerti atau bahkan ada kesalahan mohon koreksinya.
Terima kasih.
Selanjutnya Bagian 2 Outer Wrapper >>
pada :2012-04-08
Dapatkan artikel terbaru seperti Membuat Template Blogspot Bagian 1 Pola langsung ke Email kamu..!!!
Postingan
Mantapp nih gan tutorialnya,, kebetulan pengen bisa bikin template sendiri.. ditunggu lanjutannya. . . :)
BalasHapusdan mohon bimbingannya.. Trims
hebat bang,,,,trims
BalasHapusGan maaf kalo boleh tanya, kalo kita perhatikan atribut HTML div yang jadi batas ruang dari outer itu tidak ada tag div penutupnya, tapi kenapa setelah kita save templatenya tidak error? thx, salam blogger.
BalasHapusItu ada tag penutupnya yaitu tanda /(garis miring).
Hapusoh ngerti gan ngerti he he, btw pas di save ada sebuah kotak kosong yg tampil di elemen posting pas dicek namanya elemen blog-pager gan, karena gak tau fungsinya jadi ane hapus aja, itu fungsinya apaan gan? wah jadi kursus nih :hammers
BalasHapusItu navigasi default : newer post - older post
Hapusthx gan
BalasHapuscoba dulu ah...
BalasHapussetelah saya terapkan kode xml di atas ada kesalahan pada template (ane g tau apa yg salah)
BalasHapuscuman waktu mau di save ada pop up "kesalahan pada = bX-xegh3y"
sama saya juga, apa sudah dapat pemecahannya ??
Hapustolong bantuannya donk bang admin ...
sip betul gaaaaaannnnnnnnn
BalasHapusmaksih moga bermanfaat
ini dia yang lagi saya cari, biasanya cuma dapet yang share pake Artisteer tp disini ada yg bahas secara detil. thanks bang ijin mempelajarinya :D
BalasHapuskak mau tanya nih? knp ya saya kan mau bikin sidebar di bawah header!! di suruh cari kode <div id='main-wrapper' tapi pas saya cari tidak ada itu kenapa ya? mohon solusi nya kirim ke blog saya blog saya
BalasHapusSecara default blogger main-wrapper memang sharusnya ada, tapi kadang para pembuat template menggantinya dengan nama lain, tp intinya sama saja walaupun diganti kode tersebut bisa ditemukan diatas kode :
Hapussection class='main' id='main' showaddelement='no'
mas, saat saya coba di blogger tampilan baru munculnya eror dengan kalimat seperti ini " We did not find any section in your template. A template must have at least one b:section tag"
BalasHapusitu gimana solusinya ya mas...
cb nnti saya cek ditmpilan baru soalnya belum saya coba di tampilan baru blogger.
Hapusadmin : Kalau mau ngeSAVE format savenya html apakah xml ?
BalasHapusDalam format xml, saran langsung dipraktekkan di blog.
HapusKami tidak dapat menyimpan template Anda.
BalasHapusTemplate Anda tidak dapat diuraikan karena template tidak terbentuk dengan baik. Pastikan semua elemen XML ditutup dengan benar. pesan kesalahan XML:
Content is not allowed in prolog.
itu apa maksudnya bang
??????
tutorial yang sangat detail yang pernah saya temukan
Coba ulangi lagi logout lalu login lagi, ini sudah sy test dan "work fine" blogger versi baru mmang kadang masih sering error.
HapusRumit juga ya, mas?
BalasHapusSaya lebih suka pake artisteer biar ga puyeng :D
Makasih sharing bagusnya
Saya tidak dapa "SAVE" , ketika klik "SAVE" muncul pop up
BalasHapus"Kesalahan saat mengurai XML, baris 2, kolom 10: The processing instruction target matching "[xX][mM][lL]" is not allowed"
Itu gimana solusinya!!!!
bisa gan makasih banyak
BalasHapussip pas mantab banget gan,, langsung blogwalking gan...
BalasHapusmau tanya nih, kalau dicoba dengan notepad apakah bisa dilihat hasilnya???mkasih sblumnya...
BalasHapusGak bisa untuk template blogspot.
HapusApart out of your finances, commercial underwriters also evaluate your company profile along with your business associates. mortgage payment calculator canada You can also study the impact of earning extra payments on any payment date. canadian mortgage calculator
BalasHapus