Selamat siang
teman-teman blogger semua, gimana nih kabarnya? Baik bukan? Nah, kalau
teman-teman semua dalam keadaan baik, kali ini saya akan memberikan
sebuah turorial bagaimana cara pasang banner di blog kita. Mungkin
diantara temen-temen sekalian udah ada yang tahu, tapi ada baiknya kalau
saya langsung tulis aja postingannya. Memasang banner merupakan sebuah
keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah
barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang
sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada
pertanyaan lain “apakah kita bisa mengganti atau menambahkan banner
sendiri kedalam blog?” jawabannya adalah bisa, akan tetapi tentunya kita
harus sedikit bercape ria mengotak-atik kode template.
Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :
Cara pertama :
Lagi-lagi karena template terbagi dua
yaitu template klasik dan template baru, maka saya akan membagi dua
bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang
ada di header. Sebelum menginjak kepada proses editting template,
langkah awal tentunya sobat harus mempunyai banner yang akan di pakai.
Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program
desain grafis yang sobat 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 ini tidak akan bisa
mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit
memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada
di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek
segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.
Untuk Template Klasik
Seperti
yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah
membuat banner, gambar banner terserah kepada sobat, mau gambar
pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua
adalah meng upload banner tersebut, bisa di upload ke blogger sendiri
atau ke hosting lain. Untuk upload gambar atau banner anda bisa
diilakukan dengan google sites atau photobucket. Sebagai contoh, saya
sudah upload banner di www.photbucket.com dan mempunyai alamat banner
seperti ini :
http://i162.photobucket.com/albums/t253/kolis212/banner_8.gif dan gambar
bannernya seperti ini ((ukuran aslinya 468 x 60)
Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :
- 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 kita melakukan kesalahan dalam proses edtitting template
- Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan
/* Header ———————————————– */Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i162.photobucket.com/albums/t253/kolis212/banner_8.gif) no-repeat top center;
}
}
#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.
Untuk template baru
Bagi anda pengguna 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 sobat 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 sobat.Yang warna abu-abu 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://i162.photobucket.com/albums/t253/kolis212/banner_8.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 sobat untuk 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 sobat
- Tunggu beberapa saat sampai proses selesai.
- Gambar banner sobat akan di tampilkan
- Klik tombol SIMPAN PERUBAHAN
- Selesai.
Itu tadi sedikit gambaran dari saya tentang cara-cara memasang banner di bawah header blog kita. Semoga bermanfaat.
.jpg)
