Cara Desain Lay - Out Website

Sebenarnya dalam mebuat
template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini
kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat
template yang paling sederhana, tapi jangan salah walaupun caranya sederhana
tapi hasilnya bisa sangat luar biasa , tergantung dari desainernya. Ok langsung ke TKP aja deh,kayaknya udah pada nggak sabar nih. hehehe



Gini, cara termudah dalam membuat template blogger yaitu
dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita
tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai
sample template aja , downlad disini
bahannya. Sebelum kita mulai ane saranin, ente back up dulu aja.. takut terjadi sesuatu yang tidak di inginkan. hehehe



Tahap Desain



Template yang akan kita buat disini memiliki empat
komponen utama yaitu Background, Header, Main dan Footer.



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


7. Upload potongan-potongan tersebut pada sebuah
webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau
Photobucket dll.



Masih Pusing?? hehehe.. lanjut ====>>>>



Sekarang kita memasuki ke tahap penyusunan di blogger.
gini langkah-langkahnya. Buka hasil download yang sampean unduh diatas itu. Ok kita mulai:

1. Kembali ke blogger dan ke menu "Edit HTML".

2. Trus klik tombol "Browse" 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. Upload hasil gambar kamu ke hosting gambar semisal  Photobucket / apalah.. gunakan link image photobucket-nya buat masukin hasil gambar kamu untuk web

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 gambar footer.

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.



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..



Segitu dulu bahas nya ya.. hehehe

Gunakan Imajinasi anda untuk membentuk suatu web yang bernilai.. 

Semoga bermanfaat