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 "tile"
7. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.
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.
sumber : http://trik-tips.blogspot.com/2008/02/cara-membuat-template-di-blogger.html
"WELCOME" to my blog. Blog ini berisi tulisan usang, link download software, informasi un, humor, tetek bengek, dan jampi-jampi (untuk yang terakhir ini cuma bercanda) "SELAMAT MENIKMATI"
Cari Blog Ini
Langganan:
Posting Komentar (Atom)
Label
- Azwar Achmad (5)
Entri Populer
-
[Ulasan Novel Terjemahan] Aku Lupa Bahwa Aku Perempuan Posted by Rini NB on Apr 2, '09 10:41 PM ...
-
PABBARANI BULO-BULO ITAWA MAI LA PUANG NENNIA MUNYILITOA’ SINIG PADAKKU PATUPPU BATU ENGKALINGA MANENGNGI SINING TAU MAEGAE ...
-
Kete` Kesu Sejak belasan tahun yang lalu, Tana Toraja selalu menghadirkan imaji mistis dalam...
-
T erdapat berbagai tokoh paling berpengaruh di Indonesia sepanjang sejarah sangat banyak dan beragam. Kapasitas dan kapabilitas yang ad...
-
Ini mungkin adalah tempat-tempat terindah dan paling spektakuler di dunia yang sangat jarang dilihat sebelumnya. Dari keindahan Antartika,...
-
Bumi, Air dan kekayaan yang terkandung didalamnya dikuasai oleh negara dan dipergunakan sebesar-besarnya untuk kemakmuran rakyat”. (Psl.33...
-
1. Dodge Tomahawk Dodge Tomahawk adalah Viper V-10 based motorcycle yang memiliki 500 horsep...
-
Kalau mobil USA punya rekor 391 mil/jam, maka bristih gak mau kalah bahkan mengalahkan USA. Mobil british ini berkecepatan 714 mil perjam ,...
-
Biaya tinggal di Eropa terkesan bisa mahal dan bisa juga murah, jika kamu pesan kopi secangkir akan berharga 6 dollar di Kopenhagen, Denm...
-
10. Yamashita Treasure, Philipines Harta karun Yamashita, Adalah harta yang dijarah oleh pasukan Jepang pada Perang Dunia II, Lo...
Tidak ada komentar:
Posting Komentar