Sebelum menginjak kepada proses editting template, langkah awal tentunya elu harus mempunya banner yang akan di pakai. Tuk membuat sebuah banner, elu bisa menggunakan berbagai program desain grafis yang elu kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner.
Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan gue ini nggak bisa mewakili untuk pemakaian template, tapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan gue bakal ngambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.
Kayak yg gue omongin tadi :
langkah pertama yang wajib lu lakuin adalah membuat banner, gambar banner terserah yg lu suka, mau gambar pemandangan, laut, atau photo elu sendiri juga boleh.
Langkah kedua adalah meng upload banner yg udah lu bikin, bisa di upload ke blogger sendiri atau ke hosting lain. kalo gue pake www.photbucket.com tuk ndapetin alamat bannernya.
sebagai contoh kayak punya gue ini yg alamatnya :
http://3.bp.blogspot.com/_GpEBvXkvSV4/S4Qm3pa641I/AAAAAAAAAXE/RfklG301bm0/S970-R/header_GOBLOG.jpg
nah kalo dah dapet alamat banner lu sekarang mulai masang di blog elu, caranya ada 2 macam :
Buat Template Klasik :
- Sign in di blogger
- Klik menu Template
- Klim menu Edit HTML
- Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila elu ngelakuin kesalahan dalam proses edtitting template
- Sisipkan kode berikut pada style sheet css elu. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan
/* Header ----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://...alamat banner lu....gif) no-repeat top center;
}
}
- Jika elu ingin nghapus garis yang berada di tepi banner, elu harus menghapus kode berikut :
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee; <-- hapus (delete)
border-width:1px 1px 0; <-- hapus (delete)
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee; <-- hapus (delete)
border-width:0 1px 1px; <-- hapus (delete)
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}
- Klik tombol Pratinjau untuk melihat perubahan
- Jika sudah OK, klik tombol Simpan Perubahan Template
- Selesai.
Buat template baru
Bagi elu yg pake template baru, bisa menggunakan dua cara.
Cara pertama :
- Sign in di blogger
- Klik menu Layout
- Klik menu Edit HTML
- Klik tulisan Download Template Lengkap, silahkan save dulu template lu untuk backup data
- Klik kotak kecil di samping tulisan Expand Template Widget
- Tunggu beberapa saat sampai proses selesai
- Tambahkan kode berikut pada style sheet css elu.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan
/* Header -----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://...alamat banner lu....gif)no-repeat top center;
}
}
- Klik tombol Pratinjau untuk melihat perubahan yang ada
- Bila sudah OK, klik tombol SIMPAN TEMPLATE
- Selesai.
Langkahnya diatas sama dengan yang di template klasik.
Cara kedua :
- Sign in di blogger
- Klik menu Layout
- Klik menu Edit HTML
- Klik tulisan Download Template Lengkap, silahkan save dulu template elu buat backup data
- Klik kotak kecil di samping tulisan Expand Template Widget
- Tunggu beberapa saat sampai proses selesai
- cari kode berikut pada template sobat :
<b:section class='header' id='header' maxwidgets='1'>
pada kode maxwidgets='1'. Rubah angka satu menjadi angka 2, sehingga kodenya menjadi seperti ini :
<b:section class='header' id='header' maxwidgets='2'>
- Klik tombol SIMPAN TEMPLATE
Nah itu langkah pertama, langkah selanjutnya adalah :
- Klik menu Elemen Halaman
- KLik tulisan Edit yang ada pada elemen Header
- Tunggu beberapa saat
- Pilih radio button yang ada di samping tulisan "dari komputer Anda"
- Klik tombol Browse...
- Pilih banner yang telah di buat yang ada pada komputer elu
- Tunggu beberapa saat sampai proses selesai.
- Gambar banner elu akan di tampilkan
- Klik tombol SIMPAN PERUBAHAN
- Selesai.
Nah silahkan lu lihat hasilnya!
jika elu merasa gak srek ama banner itu, maka elu bisa menggantinya lagi, ulangi saja langkah-langkah di atas.
Selamat mencoba sobat !
Baca Selengkapnya..
Read more...
