Yak akhirnya jadi
juga, seperti yang aku janjikan kemarin yaitu "Cara Membuat Template
Blogger". Mulai dari mana ya? nnnngg.. :t ohya, tak jelasin dulu deh
tentang artikel ini. Gini, dalam trik berikut, kita akan mencoba membuat
template yang paling sederhana dan paling mudah. 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 deh mulai
aja deh ya, kayaknya udah pada nggak sabar nih.
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 template yang aku dah pernah aku buat,
downlad
disini bahannya. Sebelum kita
mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.
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 :
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.
Bisnis Investasi ringan dengan hasil maksimal takterbatas
