Tahap
Desain
Template yang akan kita buat disini memiliki
empat komponen utama yaitu Background, Header, Main dan Footer.
seperti yang ada dalam gambar berikut:
Jadi kamu harus membuat keempat komponen tersebut.
Cara buatnya gimana? kamu harus bisa menggunakan software image editor
seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih
jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada
bagian background usahakan bersifat "Tile / Pattern"
(kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi
beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya
terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian
potong-potong perbagian.
5. Untuk bagian Header motongnya
harus full.
6. Bagian background, main dan footer motongnya
sedikit aja karena bersifat "tile"
7. Desain diatas kalo
dipotong-potong akan menjadi seperti ini :
background
header
main
footer
8. Upload potongan-potongan
tersebut pada sebuah webhosting atau layanan penyimpanan file lainya.
Contohnya di geocities atau Photobucket dll.
Nha modeng po ra?
Sekarang
kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya.
Ohya udah di download belum tadi bahanya, kalo belum download dulu
diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit
HTML".
2. Trus klik tombol "Brows" untuk mengupload template
yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:
body { margin: 0px; padding: 0px;
text-align: left; font:$bodyfont; color:$textcolor; background: #323232
url('http://kendhin.890m.com/template/bg.jpg') repeat-x top
left; }
4. Ganti text yang dicetak tebal dengan lokasi
gambar background yang kamu buat.
5. Cari kode seperti ini :
#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg')
repeat-y top center;}
6. Ganti text yang dicetak tebal
dengan lokasi gambar main kamu.
7. Cari kode seperti ini:
#header { margin: 0; height:196px;
width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg')
no-repeat top center; }
8. Ganti text yang dicetak tebal
dengan gambar header.
9. Cari kode seperti ini:
#footer { margin: 0; width: 898px;
height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg')
repeat-y top center; }
10. Ganti text yang dicetak tebal
dengan gambara foter.
11. Masih ada beberapa hal yang harus
kamu perhatikan. coba cari kode-kode berikut:
#outer-wrapper { width:
898px; margin: 0px auto 0; text-align: justify; }
kode
width: 898px menunjukkan lebar dari blog kamu, kamu bisa
mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar
desain gambar yang kamu buat.
#main { float: left; width: 445px; margin: 5px;
padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word;
/* fix for long text breaking sidebar float in IE */ overflow: hidden;
}
kode width: 445px; adalah lebar daerah main
yang berisi posting, kamu bisa merubahnya.
#sidebar { float: right; width: 153px;
padding-right: 50px; font-size: 83%; color: $sidebartextcolor;
line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper
{float: left; width: 195px; padding-left: 10px; word-wrap:
break-word; overflow: hidden; }
kode width: 153px;
adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah
lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak
antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan.
Dan kode padding-left: 10px; adalah jarak antara isi sidebar
kiri dengan garis batas kiri.
#header { margin: 0; height:196px; width:898; color:
$pagetitlecolor; background:
url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
kode
height:196px; width:898; adalah ukuran tinggi dan lebar bagian header,
kamu bisa menyesuaikannya dengan ukuran header kamu.
#footer { margin: 0; width: 898px;
height:80px; padding: 0px; background:
url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }
kode
width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian
footer.
12. Nah kalo udah selesai coba di preview
template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.
:f
akhirnya selesai juga aku buat artikel tentang pembuatan template,
capek ya? tapi ingat sekali lagi ini adalah metode membuat template
yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit
lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina
template tersebut.
OK SELAMAT BERJUANG......
Diposting oleh
Zulinda Dwi Safitri
|
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar