Membuat Template Blogspot Bagian 1
Membuat blog mungkin sesuatu yang tidak asing buat kalian. Baik itu untuk artikel, berita, info, toko online maupun film.
Kita bisa dengan mudah membuat blog jaman teknologi canggih sekarang ini. Karena kalau kita googling pasti banyak para sesepuh atau master dalam membuat blog yang share template-template menarik dan keren untuk kita tampilkan pada blog kita.
akan tetapi kali ini saya akan membahas langkah demi langkah bagaimana membuat template blogger mulai dari nol, Jika kamu belum pernah membuat sebuah template pernah membayangkan bagimana sulitnya membuat template tetapi harus diketahui bahwa membuat template tidak sesulit yang dibayangkan asalkan kita punya kemauan dan juga ketelitian sebuah template dapat dibuat dengan mudah.
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.
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.
Penjelasan :
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>
<!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.
ID ini harus bersifat unik atau tidak boleh ada yang sama, jika tidak maka template tidak akan bekerja dengan baik, bahkan tidak akan ada pengaruh perubahan pada template.
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 :
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 </
Kita kasih contoh :
Contoh :
CSS : #sidebar1 { }
HTML :
<div id='sidebar1'>
</div>
Maka bisa diganti dengan metode pemanggilan class bukan id
CSS : .sidebar1 { }
HTML
<div class='sidebar1'>
</div>
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 </
- <div class='sidebar1'>
- <title><data:blog.pageTitle/></title>
</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.
Bagiuan 2 Outer Wrapper =>
