Kali ini saya akan menulis “Bagaimana Cara membikin Template Blog” ala Bahrul…!
Kenapa saya katakan ala Bahrul ? ya.. karena masih banyak cara lain dalam mebuat template
atau layout blog. Mungkin cara saya ini akan terlihat kuno dan sulit bagi sebagian orang , tapi
mungkin juga akan terlihat mudah bagi yang lainnya.
Template blog yang akan kita bikin , nantinya akan diarahkan untuk template blogspot . Namun
tidak menutup kemungkinan jika sudah familiar dengan beberapa kode-kode HTML , kita akan
mudah mengaplikasikannya ke CMS blog lain semisal wordpress.org
Tool atau software yang dipakai dalam membuat template blog ini , adalah yang ada di
windows ,
yakni : notepad , MS Paint, Microsoft Office Picture Manager,dan MS Excel . Ini adalah tool
standar yang biasanya default ada di sistem operasi Windows . Akan lebih baik jika ada MS
Frontpage atau Dreamweaver. Tapi karena sebagian besar orang tidak semuanya memiliki dua
tool terakhir , maka saya kira tool default tadi sudah cukup buat kita. O ya..software lain yang
penting , adalah browser Mozilla Firefox. Kenapa saya memilih mozilla ? karena browser ini lah
yang paling banyak dipakai oleh pengguna internet saat ini. Jika di komputer anda belum ada
browser mozilla firefox , silahkan download dulu disini , dan lalu instal.
<html>
<head>
<title>Template Pertamaku</title>
</head>
<body>
</body>
</html>
Dan di bagian antara <head> dan </head> : ini adalah tempat menaruh titel blog
( <title>Template Pertamaku</title> ) , juga tempat untuk kode-kode pengaturan tampilan blog
(yang dikenal dengan Style.css ) dan dibagian ini juga tempat utk menaruh beberapa script
javascript pengatur tampilan layout.
Kemudian diantara Tag <body> ISI </body> itulah nantinya akan kita tempatkan kontent atau isi
dari blog kita. DI bagian ini nantinya kita akan mengisikan Header(kepala) Postingan(konten) ,
sidebar dan footer.
Oke ..dilanjuuutttt…..
Setelah selesai anda ketik di notepad , lalu klik File dan kemudian klik “Save as” .
Beri nama di kotak “file name” dengan misalnya : template-pertamaku-step1.html
Jangan ada spasi dan harus diakhiri dengan .html (titik html).
Dikotak “Save as type” pilih “All files” Lalu klik tombol Save.
O ya..kalau bisa simpan di folder khusus agar mudah mencari nantinya. (kalau saya khusus
membuat folder “Belajar Template” )
Jika sudah anda simpan, buka file tersebut dengan mozilla firefox (klik kanan file, lalu Open with
Mozilla” ). Jika tidak salah ketik , maka anda akan melihat sebuah halaman berwarna biru
dengan tulisan di atas kiri :
Dan di ujung atas kiri browser akan nampak : Template Pertamaku-Mozilla Firefox
Nah…itu adalah halaman HTML pertama yang anda buat yang merupakan cikal bakal template
Hhhhh…istirahat dulu sejenak… kendurkan urat syaraf…. lihat seputar halaman ini..siapa tau
ada link yang berguna buat anda dan blog ini ..
Bagaimana ? sudah rilex ? Sudah siap melanjutkan belajar bikin templatenya ?? oke deh.. mari
kita teruskan…!
Buka notepad baru , file yang pertama tadi biarkan saja, untuk anda simpan sebagai bahan
perbandingan dan pembelajaran.
Ini kodenya :
<style type="text/css">
</style>
<div id="kotakblog">
<div id="tembok-utama">
<div id="kotak-posting">
</div>
<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">Isi ruang-Sidebar-top-besar</div>
</div>
</div>
</div>
Kemudian klik save as lagi seperti diatas, dan beri nama : template-pertamaSTEP2.html
<div id="kotakblog">
<div adalah permulaan dalam mengawali kode , dan ID adalah identitas dari isi (dalam hal
ini nama nya = kotakblog dan isinya adalah seluruh yang ada diantara tag ini sampai dengan
nya itu adalah ISI dari ID yang diberi nama kotakblog , id atau nama ini nanti fungsinya
1. Kemudian <div id="kotakblog"> = rumah itu sendiri , dan di kode ini lah nantinya semua
3. Masuk kebawah ada kuda2 beton penopang atap = <div id="navigasi">Isi navigasi yang
4. Tembok utama : <div id="tembok-utama"> , isinya untuk jendela,pintu ,gambar lukisan dan
lain-lain.
5. Kemudian kusen pintu = posting , kodenya : <div id="kotak-posting"> = tempat akan taruh
<div id="ruang-Sidebar">
</div>
Kalau iya..coba lagi deh lihat dengan gambar sebagai berikut : (lihat gambar)
Layout_Bikin_Template
maka di broser anda akan muncul beberapa tulisan seperti yang ada pada kode diatas.
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
/*------------------------------------------------
Author: Aku
body {
background:#0ff;
color:#126A9B;
font-size:13px;
text-align: center;
#kotakblog {
width:1000px;
background:#0ff;
}
#topbar {
width:920px;
height:30px;
background:#aaa;
#header {
width:920px;
height:100px;
background:#0f0;
#navigasi {
width:920px;
height:30px;
}
#tembok-utama {
width:920px;
#kotak-posting {
width:500px;
#isi-Posting {
width:470px;
#ruang-Sidebar {
width:350px;
border:1px solid #000;background:#abc;
#ruang-Sidebar-top-besar {
width:330px;
#ruang-Sidebar-kanan {
width:150px;
#ruang-Sidebar-kiri {
width:150px;
}
#footer-kaki {
width:920px;
height:50px;
Kalau sudah , ayo dah di Save as lagi , dan beri nama :
template-pertamaSTEP3.html
Jreengggg…
Tapi masih nempel dan belum kelihatan mana sidebar dan kotak postingannya …
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 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 ,
body {
background:#0ff;
color:#126A9B;
font-size:13px;
text-align: center;
body {
padding:3px;
background:#0ff;
color:#126A9B;
font-size:13px;
text-align: center;
}
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.
padding:10px 5px ;
ini artinya jarak atas-dan -bawah = 10px . sedangkan jarak kanan-dan-kiri = 5px
ini artinya jarak atas = 10px . jarak kanan-dan-kiri = 3px , jarak bawah = 3px
ini artinya jarak atas = 10px -kanan = 6px -bawah = 4px -kiri= 2px
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
#ruang-Sidebar {
float:left;
width:350px;
background:#abc;
padding:3px;
http://www.bahrul-ulum.com/belajar-membuat-template-tahap-dua