Panduan Tutorial Membuat Template Blog

Tutorial Cara Membuat Template Blog ini adalah lanjutan dari Tutorial Cara Membuat Template Blog bagian 2. Jika anda belum melihat Tutorial Cara Membuat Template Blog bagian 2, silahkan liat disini.

Langkah 3 : Mengatur Bentuk atau Layout tampilan Template (Style.css)

A.Membuat Layout Template dengan denah rencana

Nah disini kita bisa menggunakan MS Excel sebagai denah rencana awal pepmbuatan Template , bagaimana nantinya tampilan blog kita, baik itu warna, border dan gambar2 yang diperlukan. Ibaratnya ini previewnya . Contoh nya bisa anda lihat gambar di Denah Layout Pembuatan Template

B. Membuat layout dengan Kode

Buka lagi notepad baru,

Copy kode-kode yang ada di file kedua tadi (file template-pertamaSTEP2.html)

Tambahkan kode-kode ini dibawah jni pada bagian tag :

<style type="text/css">masukkan kode disini </style>

Dan ini kode2 nya :

/*------------------------------------------------
Theme Name: Template pertamaku
Theme URI: http://blogaku.com
Description: Ini Template pertama aku
created by <a href="http://blogaku.com/">blogaku</a> .
Author: Aku
Author URI: http://blogaku.com/
Date: 08 April 2010
----------------------------------------------- */

/*----Pengaturan layout blog mulai dari sini----*/

body {
background:#0ff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;

}

#kotakblog {
width:1000px;
border:1px solid #000;
background:#0ff;
}
#topbar {
width:920px;
height:30px;
border:1px solid #000;
background:#aaa;
}
#header {
width:920px;
height:100px;
border:1px solid #000;
background:#0f0;
}

#navigasi {
width:920px;
height:30px;
border:1px solid #000;background:#ccc;
}

#tembok-utama {
width:920px;
border:1px solid #000;background:#ddd;
}

#kotak-posting {
width:500px;
border:1px solid #000;background:#eee;
}

#isi-Posting {
width:470px;
border:1px solid #000;background:#ff0;
}

#ruang-Sidebar {
width:350px;
border:1px solid #000;background:#abc;
}

#ruang-Sidebar-top-besar {
width:330px;
border:1px solid #000;background:#ff0fff;
}

#ruang-Sidebar-kanan {
width:150px;
border:1px solid #000;background:#bbc;
}

#ruang-Sidebar-kiri {
width:150px;
border:1px solid #000;background:#ccd;
}

#footer-kaki {
width:920px;
height:50px;
border:1px solid #000;background:#00ffff;
}
/*---akhir CSS sampai disini yaaaa---*/

Bagaimana ? Sudah ditambahkan ? ?


Kalau sudah , ayo dah di  Save as lagi , dan beri nama :

template-pertamaSTEP3.html

Lihat hasilnya dengan membuka di browser .

Jreengggg…

Sudah mulai berbentuk kan ya ??

Tapi masih nempel dan belum kelihatan mana sidebar dan kotak postingannya …

Baiklah sekarang kita atur lebih dalam lagi.

C. Mengatur Posisi layout Template

Kita sekarang akan menambahkan dengan posisi (float) , margin dan Padding.

Kalau posisi pasti sudah tau ya, nah lalu margin dan padding itu apa sih ?

margin dan padding adalah pengatur jarak . Keduanya hampir sama , dan lebih jelasnya mari kita narasikan lagi dengan rumah.

Pagar Rumah -- Rumah -- meja

Kita fokuskan pada pengaturan jarak Rumah. Antara rumah dengan pagar (jarak keluar) diatur dengan margin , dan antara rumah dengan meja (jarak kedalam) diatur dengan padding.

Untuk lebih jelas soal padding dan margin bisa lihat gambar : perbedaan padding dan margin

Sebaiknya bikin lagi aja di notepad baru ya… copy code yang ada di template-pertamaSTEP3 , lalu save as dengan template-pertamaSTEP4.html

Mari kita tambahkan padding:3px;

Di bagian css nya , misal nya :

body {
background:#0ff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;
}

tambahkan padding:3px; menjadi sebagai berikut :

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

Nah…lihat hasilnya dengan membuka file template-pertamaSTEP4.html dibrowser . Sudah berubah kan ?


Seterusnya tambahkan ya di di kode-kode css yang lain. Nambahinnya diantara tanda { dan }

Sudah ditambahkan ? jika sudah.. coba di refresh browser nya dan lihat hasilnya.

Anda bisa memperkecil angka 3 menjadi 2 misalnya, atau memperbesar nya. Terserah saja. Nantinya kita bisa mengatur si padding agar bisa mengatur jarak atas-kanan-bawah-kiri.

Pada contoh kode padding diatas : padding:3px;

Dia mengatur sekaligus jarak atas-kanan-bawah-kiri , masing-masing sebesar 3px

Kita bisa menggunakan kode sebagai berikut :

padding:10px 5px ;

ini artinya jarak atas-dan -bawah = 10px . sedangkan jarak kanan-dan-kiri = 5px

padding:10px 3px 7px;


ini artinya jarak atas = 10px . jarak kanan-dan-kiri = 3px , jarak bawah = 3px

padding:10px 6px 4px 2px;

ini artinya jarak atas = 10px -kanan = 6px -bawah = 4px -kiri= 2px

Aturan ini juga berlaku untuk pengaturan margin

Oke lanjut….

Setelah di refresh, kita melihat bagian sidebar masih berada dibawah kotak posting.

Nah mari kita pergi ke tag CSS pengaturan #Sidebar dan pengaturan #kotak-posting . Tambahin kode ini :   float:left;

Sehingga hasilnya menjadi seperti ini :

#ruang-Sidebar {
float:left;
width:350px;
border:1px solid #000;
background:#abc;
padding:3px;
}

Yang di #kotak-posting juga ditambahin float:left; ya...

... ( Brrrr....istirahat dulu lagi ahh.... lanjut besok ya..)