tutorial template blog

Cara membuat Template Sederhana Blogspot

Yang pertama pensil dan kertas untuk membuat sketsa tampilan dan letak komponen template kamu.
Yang kedua tentu saja komputer atau laptop, jangan pake mesin ketik ya...
Yang ketiga software HTML KIT untuk membantu menulis kode html dan css. Sebenernya bisa juga pake alat sederhana menggunakan notepad tapi mending pake HTML-Kit aja ya.. hehe... kalau yang belum punya download aja di sini “ DOWNLOAD HTML-Kit”
Yang keempat koneksi internet, ini terakhir bila template sudah siap di pasang pada blog kamu.
Dan terakhir yang kelima adalah berdoa biar lancar buatnya :)

Nah jadi itu yang perlu disiapkan, bagaimana apa kamu dah siap? kalau belum tak tunggu dech... tak tidur dulu ya.. zzzzzz...zzzzz.....zzzz.... brrrrrrrr...
OK kita anggap sudah ya, kalau sudah ikuti langkah - langkah di bawah ini :

LANGKAH PERTAMA

Ambil pensil dan kertas kosong, lalu gambar sketsa tempalte yang mau kamu rencanakan. Nah kalau di artikel ini seketsanya seperti di bawah ini ngikutin aja ya biar ngerti dulu kalau udah berhasil silahkan buat sendiri sketsanya sesuai keingann kamu :

Kalau dalam bahasa tulisan bisa di tulis sebagai berikut :

Header
Top Menu
Sidebar Kiri
Kontent
Sidebar Kanan
Footer

Cara Membuat Template Sederhana Blogspot

penulisan kode HTML dan Kode CSS. Untuk Part 2 ini kita akan membuat kode HTML standart, penulisan bagian-bagian yang akan di tampilkan pada template. Oh ya sudah download HTML Kit belum? Kalau belum nich download di sini Download HTML Kit , jangan lupa di instal ya. Kalau sudah mari kita memulai menulis kode HTML.

LANGKAH PERTAMA

Buka Software HTML Kit , klik di Create a new file lalu klik ok
Nah sekarang muncul halaman baru dengan beberapa kode HTML, ini kode standart yang ada di web . Ganti tulisan yang diapit <title>....</title> dengan judul blog yang kamu suka.
Setelah tag ...</title> klik enter, lalu tambahkan style. Caranya klik Action > Tools > HTML Tags Wizard > STYLE dan klik ok.Maka pada halaman akan muncul tulisan <style type=”text/css”>....</style> , nah disinilah nanti kita akan meletakan kode CSS untuk mengatur letak komponen dari template.
Langkah selanjutnya, pindah crusor ke antara <body>.... </body>. Di posisi ini digunakan untuk menempatkan isi dari bagian-bagian template blog. Sekarang siapkan struktur yang sudah di buat di kertas pada artikel Cara Membuat Template Sederhana Blogspot (Part 1 ) dan tulis seperti gambar di bawah ini : Keterangan :
Kotakblog – kotak dimana kita meletakan semua komponen yang akan kita tampilkan di template blog seperti header, sidebar, kontent dan footer.
Header - Tempat diletakannya judul blog dan diskripsi
Top menu - Tempat diletakannya menu-menu yang membantu pengunjung menemukan yang mereka cari dalam blog kamu
Kotak-content - kotak dimana kita meletakan sidebar kiri, konten (postingan), dan sidebar kanan.
Ruang-sidebarkiri - ruang dimana kita meletakan sidebar kiri
Kontent – ruang dimana kita meletakan judul artikel, isi artikel, metatag komentar maupun form komentar
Ruang-sidebarkanan - ruang dimana kita meletakan sidebar kanan
Footer – biasanya sich digunakan untuk meletakan tahun pembuatan blog dan identitas pembuat.
Sementara di simpan dulu ya, tekan ctrl+s dan beri nama desain template blogspot.

Mengatur Header dan Top Menu

Di dalam header akan kita letakan Judul Blog dan Diskripsi. Dan top menu berisi menu-menu untuk memudahkan pengunjung blog menemukan artikel yang mereka cari. Ok langsung ikuti langkah-langkah di bawah ini :

Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan kotakblog lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
Setelah muncul boks TagsWizard ketik kotakblog pada kotak isian di samping “id” kemudaian klik ok. Makan akan muncul kode <div id="kotakblog">kotakblog</div>,pindah </div> ke posisi dibawah footer dan hapus tulisan kotakblog yang berwarna hitam.
Setelah itu blok tulisan header, lalu ulangi langkah sebelumnya dengan mengklik “HTML TagsWizard” pada toolbar atas, pilih DIV. Dan pada kotak isian disamping id tulis header lalu klik ok.
Maka akan muncul kode header pindah ke bawah diskripsi blog lalu hapus tulisan header yang diluar <> tara... jadilah seperti dibawah ini :
Lakukan hal yang sama dengan tulisan top-menu, blog tulisan tersebut klik “HTML TagsWizard” , tulis top-menu di kotak isian disamping id klik ok. Akan muncul tags <div id="top-menu">top-menu</div> lalu hapus tulisan top-menu dan pindah </div> kebawah Contact Us. Hasilnya seperti dibawah ini :
Nah sudah selesai membuat tag header dan top menu, sekarang saatnya mengatur letak masing – masing content dengan CSS.
Scroll lembar halaman sampai ketemu <style type="text/css"> </style> nah disini kita tulis CSS nya.
Langkah pertama copy paste kode dibawah ini diantara  :
body {
padding:3px;
background:#fff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;
margin:2px; }
#kotakblog {
margin:2px;
padding:3px;
width:930px;
border:1px solid #000;
background:#0ff;
margin:0 auto;
}
Akan jadi seperti di bawah ini :Kemudian copy paste kode dibawah ini di bawahnya :
#header {
margin:2px;
padding:3px;
width:920px;
height:100px;
border:1px solid #000;
background:#0f0;text-align: left;
}
#top-menu {
margin:2px;
padding:3px;
width:920px;
height:30px;
border:1px solid #000;
background:#ccc;text-align: left;
}
Akan jadi seperti di bawah ini :
Save dengan menekan ctrl+s, nah selesai sudah tahap 3 mengaturan header dan top menu. Bila klik preview seharusnya hasilnya seperti dibawah ini :

Sekarang kita sudah membuat struktur ruangan untuk header dan top menu.Bagaimana mudah bukan? ok sampai disini dulu ya... :) di artikel berikutnya saya akan membagi ilmu lanjutan Bagaimana Mengatur bagian Sidebar dan Kontent.

Mengatur Sidebar dan Content

Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan ruang-sidebarkiri lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV

Lakukan langkah-langkah pada poin ke 2 untuk bagian sidebar–kanan dan kontent. Untuk id sidebar kanan tulis sidebar dan id kontent isi dengan content. Hapus tulisan ruang-sidebarkiri, kontent, dan ruang-sidebarkanan . dan hasilnya seperti di bawah ini :
Langkah selanjutnya kita buat code CSS masing masing bagian . scroll layar ke atas sampai terlihat #top-menu {..... } copy paste code CSS dibawah ini untuk sidebar.
#sidebar {
margin:2px;
padding:3px;
width:200px;
border:1px solid #000;background:#abc;
float:left;
Overflow:hidden;
}
Dan juga copy paste kode CSS di bawah ini untuk content.
#content {
Overflow:hidden;
margin:2px;
padding:3px;
width:500px;
border:1px solid #000;
background:#eee;
float:left;text-align: left;
}
Sudah dan haslinya seperti dibahah ini.. betul?
OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini

OK sekian dulu ya untuk pengaturan sidebar dan content, untuk artikel berikutnya kita akan mengatur bagian footer

Mengatur Bagian Footer

Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan footer lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
Setelah muncul boks TagsWizard ketik footer pada kotak isian di samping “id” kemudaian klik ok.

Ganti tulisan footer dengan tulisan " (©) 2011 Design by nama kamu ". Jangan lupa hapus kurung buka dan tutup yang menyertai &amp....
Langkah selanjutnya kita buat code CSS untuk bagian footer. scroll layar ke atas sampai terlihat #content {..... } copy paste code CSS dibawah ini untuk footer.
#footer {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
text-align: center;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.2em;
}

Sudah dan haslinya seperti dibahah ini.. betul?
OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini

Tambahan :

Untuk menghilangkan efek float silahkan tambahkan kode ini

<br class="clear">

sebelum </div> sidebar dan <div id="footer"> seperti dibawah ini

Dan juga tambahkan kode CSS untuk clear di bawah ini di bawah kode CSS #footer{....} :
.clear {
clear: both;
text-align: center;
}
kemudian tekan tombol crtl+s.

Nah selesai sudah pembuatan template tahap awal, untuk artikel berikutnya kita akan memasukan kode khusus blogspot ke template agar dapat dipasang di blog kamu.

Merubah kode HTML menjadi XML

ini saatnya menambahkan kode khusus untuk Blogspot supaya dapat kita pasang template yang kita buat di Blogspot. OK.. ikuti langkah-langkah di bawah ini :

Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
Muncul halaman yang kita buat kemarin. Cari kode :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

Yang ada di bagian paling atas, lalu ganti kode tersebut dengan kode di bawah 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 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'>
Kemudian dibawah kode <head>tambahan kode di bawah ini :

<b:include data='blog' name='all-head-content'/>

Lalu pada kode :

<title>Desain Template Blog</title>

Tulisan Template Blog Sederhana ganti dengan kode dibawah ini :

<data:blog.pageTitle/>

Dan kode :

<style type="text/css">
diganti dengan kode
<b:skin><![CDATA[

Kode Lengkapnya seperti gambar dibawah ini :

Kemudian cari kode
</style>
untuk mempermudah pencarian silahkan tekan tombol ctrl+f dan copas kode tadi. Kalau sudah ketemu ganti kode tersebut dengan kode
]]></b:skin>
Nah kalau proses ini sudah selesai coba klik file> save as beri nama template diikuti .xml lalau klik save. Nah jadi sudah file template kita dan siap di upload di blog kamu. Untuk cara upload bisa baca artikel Cara Ganti Template Blogspot. setelah di upload klik kanan pada lihat blog lalu klik “Open Link in new Tab” bagaimana sudah muncul template hasil karya kamu sendiri? Untuk sementara seperti itu ya dan tampilannya seperti gambar di bawah ini :

Kalau ada yang menemukan sidebar-kanannya masih di bawah sidebar-kiri masuk ke Edit HTML lalu cari #content. Untuk mempermudah silahkan tekan F3 pada keyboard untuk mencarinya. Kalau sudah ketemu ubah width nya menjadi 492px, lalu klik tombol Simpan Template.
Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/

Cara Menambah Kode Khusus Header dan Diskripsi Template Blogspot

kita akan menambah kode-kode yang di gunakan untuk template Blogspot, kita tidak lagi menggunakan HTML Kit tapi langsung edit di blog kita. Ikuti langkah-langkah di bawah ini :

Masuk Ke Account Blogspot kamu.
Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML jangan lupa beri tanda cek pada Expand Template Widget. Cari kode CSS di bawah ini :
#header {
...........
}

Lalu Tambahkan di bawahnya kode html di bawah ini :

#header h1 {
margin:5px 5px 0 0;
padding:15px 20px 5px 20px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: Georgia, Serif;
font-size:24px;
font-weight:bold;
}
#header .description {
color: #f3f2e8;
margin-left: 0px;
padding-left: 20px;
font-family:Georgia, Times New Roman;
font-size:14px;
font-style:normal;
font-weight:bold;
}
langkah berikutnya cari kode di bawah ini :
<div id='header'>
header
</div>

ganti tulisan heade yang di apit <div id='header'>... </div> ganti dengan kode dibawah ini :
<b:section class='header' id='gadgetheader' preferred='yes'/>

Kemudian klik tombol Simpan Template
Selanjutnya uncheck pada Expand Template Widget
Klik pada tab Element halaman, dan akan terlihat struktur dari template blog kamu. Pada posisi header terdapat tulisan Tambah Gadget,
klik disana maka akan muncul jendela baru untuk memilih gadget pilih header halaman klik tanda (+)

Lalu isi judul blog maupun diskripsinya lalu klik simpan.
untuk melihat hasilnya klik kanan mouse kamu pada tulisan Lihat Blog lalau pilih open new tab (kalau pake mozzila) taraa akan muncul seperti gambar di bawah ini :
Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/

Membuat Top Menu Template Blogspot

kita akan menambah kode untuk top menu di template Blogspot, ikuti langkah-langkah di bawah ini :

Masuk Ke Account Blogspot kamu.
Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. jangan lupa beri tanda cek pada Expand Template Widget.Cari kode di bawah ini :
#top-menu {
...........
}

Lalu tambahkan dibawahnya Kode CSS berikut :
#top-menu a, #top-menu a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
font-weight:bold;
}
#top-menu a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#topleft {
width: 500px;
float: left;
margin: 5px 0 0 3px;
padding: 0px;
}
Langakah selanjutnya cari kode di bawah ini :
<div id='top-menu'>
Home |
About Me |
Contact Us
</div>
Tambahkan kode seperti di bawah ini :
<div id='top-menu'>
<div id='topleft'>
<a href='http://tempfor.blogspot.com/'>Home</a> |
<a href='http://tempfor.blogspot.com/'>About Me</a> |
<a href='http://tempfor.blogspot.com/'>Contact Us</a>
</div>
</div>

kemudian ganti tulisan yang berwarna merah dengan link yang kamu kehendaki.
Misal :
<a href='http://tempfor.blogspot.com/'>Home</a>
ganti http://tempfor.blogspot.com dengan alamat blog kamu.
Setelah selesai klik simpan template. Uuntuk melihat hasilnya klik kanan mouse kamu pada tulisan Lihat Blog lalau pilih open new tab (kalau pake mozzila) bimsalabim jadi deh top menunya di bawah ini :
Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/

Jika panah mouse berada pada tulisan home di top menu akan keluar garis bawah yang menandakan ada linknya :)

Tambahan : Merapikan bagian Navbar. Kenapa harus dirapikan ? ini sebabnya : kalau kamu lihat navbarnya masih ada jarak dengan browser untuk itu kita buat nempel ke browser aja... caranya ?
Ikuti langkah-langkah di bawah ini :

Masih pada posisi Edit HTML, cari kode CSS si bawah ini :

body {
padding:3px;
background:#fff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;
margin:2px;
}

Ubah padding dari 3px menjadi auto dan margin dari 2px ke auto. Kemudian klik simpan template. Setelah proses selesai silahkan lihat blog ada dannnnn sudah rapi deh... :)

Membuat Sidebar Template Blogspot

menambah kode untuk sidebar di template Blogspot, ikuti langkah-langkah di bawah ini :

Masuk Ke Account Blogspot kamu.
Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. jangan lupa beri tanda cek pada Expand Template Widget.Cari kode di bawah ini :
<div id='sidebar'>...... </div>

Lalu tambahkan didalamnya Kode berikut :
Sidebar-kiri :
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>

Sidebar-kanan :
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>

Dan lengkapnya seperti di bawah ini :
<div id='sidebar'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<div id='content'>
judul-postingan
isi-posting
metatag
kolom-komentar
form-komentar
</div>
<div id='sidebar'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
<br class='clear'/>
</div>

Jangan lupa hapus tulisan sidebar-kiri dan sidebar-kanan ya..

Keterangan :
Ini digunakan untuk menampilkan widget pada blogspot pada posisi sidebar.
Setelah selesai klik simpan template.
Langkah selanjutnya uncheck Expand Template Widget, lalu klik Elemen laman maka akan muncul seperti gambar dibawah ini di kanan dan dikiri.

Nah ini menandakan sidebar kanan dan kiri sudah jadi. Tinggal klik tambah gadget pilih dah gadget yang mau kamu tampilin di sidebar... ok coy...
Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/