Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Pasang Banner di Header Blog

Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini :

“Bagaimana caranya menyimpan banner pada header blog”

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.

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 cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di http://www.photbucket.com dan mempunyai alamat banner seperti ini :

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):

Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :

  1. Sign in di blogger
  2. Klik menu Template
  3. Klim menu Edit HTML
  4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
  5. Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan
  6. /* Header
    ———————————————– */
    @media all {
    #header {
    width:660px;
    margin:0 auto 10px;
    border:1px solid #ccc;
    background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center;
    }
    }

  7. Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :
  8. #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;
    }

  9. Klik tombol Pratinjau untuk melihat perubahan
  10. Jika sudah OK, klik tombol Simpan Perubahan Template
  11. Selesai.

Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.

Cara pertama :

  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
  5. Klik kotak kecil di samping tulisan Expand Template Widget
  6. Tunggu beberapa saat sampai proses selesai
  7. Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan
  8. /* Header
    ———————————————–
    */

    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid #ccc;
    background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center;
    }
    }

  9. Klik tombol Pratinjau untuk melihat perubahan yang ada
  10. Bila sudah OK, klik tombol SIMPAN TEMPLATE
  11. Selesai.

Langkahnya diatas sama dengan yang di template klasik.

Cara kedua :

  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
  5. Klik kotak kecil di samping tulisan Expand Template Widget
  6. Tunggu beberapa saat sampai proses selesai
  7. cari kode berikut pada template sobat :
  8. <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′>

  9. Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah :

  1. Klik menu Elemen Halaman
  2. KLik tulisan Edit yang ada pada elemen Header
  3. Tunggu beberapa saat
  4. Pilih radio button yang ada di samping tulisan dari komputer Anda
  5. Klik tombol Browse…
  6. Pilih banner yang telah di buat yang ada pada komputer sobat
  7. Tunggu beberapa saat sampai proses selesai.
  8. Gambar banner sobat akan di tampilkan
  9. Klik tombol SIMPAN PERUBAHAN
  10. Selesai.

Nah silahkan sobat lihat hasilnya!

jika sobat merasa banner tersebut, maka sobat bisa menggantinya lagi, ulangi saja
langkah-langkah di atas.

Ok sobat, mungkin pembahasan tentang cara mengganti banner sudah selesai, untuk melihat contoh blog yang sudah saya tambahkan banner silahkan klik di sini.
Pembahasan diatas adalah untuk menambahkan hanya satu banner saja, apabila sobat tertarik membuat banner yang bisa berubah-ubah, silahkan baca di sini. Untuk melihat contohnya silahkan klik di sini

Selamat mencoba sobat !

28 Juni 2007 - Posted by | aksesori blog, banner, blog tutorial

33 Komentar »

  1. trim’s atas tipsnya mas…tapi saya masih bingung untuk bisa merubah panjang atau lebar banner di header saya.saya pernah masukkan gambar untuk header blog saya tapi hasilnya headernya jadi besar sesuai gambar yg asli… help mas ya…

    Komentar oleh sugi | 21 Juli 2007 | Balas

  2. Ya bikin banner nya harus di sesuaikan dengan ukuran untuk header tersebut. ukuran header bisa di lihat
    pada style css nya..height–> berarti
    untuk tinggi banner.. width–> berarti untuk lebar banner..atau justru kita bisa merubah style css nya sesuai dengan keinginan kita

    Komentar oleh Rohman | 21 Juli 2007 | Balas

  3. nih lagi nyobain. sy download photoshop sm corel draw dl buat bikin bannernya. thx ya

    Komentar oleh tedybanka | 31 Oktober 2007 | Balas

  4. Nah, gimana cara memprotect biar content kita ga diambil oleh web orang lain. Setau saya itu bisa diakali di settingan feed nya, tapi klo iu diubah semisal diubah ke short atau none, apakah ini akan berpengaruh di serp atau feed di feedburner?

    Mohon petunjuk mas rohman….

    Komentar oleh broky | 17 November 2007 | Balas

  5. Maaf saya salah tempat, seharusnya di artikel Feed…

    kabuur

    Komentar oleh broky | 17 November 2007 | Balas

  6. sip…….buanget…!!!

    Komentar oleh ihsan | 24 November 2007 | Balas

  7. Mas, terima kasih atas artikelnya. Mas agar banner yang kita pasang di dalam artikel/posting kita bisa rata tengah (align=center) gimana caranya ? Punya saja kok mesti ada di pinggir, ga bisa tengah. Begitu juga untuk pasang banner iklan, selalu dipinggir. Terima kasih atas jawabannya

    Komentar oleh Konsultan Gratisan | 19 Januari 2008 | Balas

  8. @Konsultan gratisan : kalo mau tengah pake code ini :

    <center>

    alamat gambar disini

    <center>

    atau bisa juga pake yang ini :

    <div align=”center”>

    alamat gambar disini

    </div>

    atau masih banyak juga cara lain, cuma kalo pake cara ini harus pada edit HTMl bukan pada Compose.

    BTW, kalo upload di blogger, kan bisa juga pilih posisi tengah, kanan, kiri, besar, kecil… pilih aja gambar tengah… nanti gambarnya langsung di tengah

    Komentar oleh rohman | 24 Januari 2008 | Balas

  9. kok susah bgt yo pake blogger klasik?piye caranya buat edit HTML nya?conttoh buat banner aja susah minta ampun,plesae kasih ilmu sedikit dong

    Komentar oleh INFOMEDIALIST | 2 Maret 2008 | Balas

  10. kang..ada koleksi header blog gak ya..kalo gak salah saya dulu ada. tulungin kang

    Komentar oleh Jevandra Putra Raden | 23 Maret 2008 | Balas

  11. koq susah banget ya? kode css nya kok beda antara kode html blog saya dengan contoh tutorial diatas?,padahal saya sudah buar banner bagus tapi saya tidak tau gimana masangnya? Tolong dunk mas saya pake templet klasik,apa style sheet css pada tiap templet klasik beda?maklum mas pemula,tolong juga kasih jawaban di email saya mail2aris@gmail.com

    Komentar oleh aris | 3 April 2008 | Balas

  12. Than’x atas infonya, tp gimana kalau kita pakai template download-an dari website lain?
    Pa caranya juga sama?

    Komentar oleh Taufiq | 8 April 2008 | Balas

  13. mas gimana buat menu tab 6 ke bawah atau seperti pada blog ahsan http://ahsansma8.blogspot.com

    Komentar oleh yaaz.id | 15 April 2008 | Balas

  14. Mas, besar gambar yang diperluin untuk buat header tu berapa pixel si mas? Soalnya, saya kalo buat selalu kekecilan.

    Komentar oleh <b>ÜÜ:D</b> | 6 Mei 2008 | Balas

  15. makasih ya Mas! dengan melihat artikel Anda saya telah memiliki banner di blog saya!

    Komentar oleh Hidup Itu Manis | 14 Mei 2008 | Balas

  16. ooh, sudah mas, ternyata 760X150 pixel gede gambarnya. trims buat tutorialnya ya mas!

    Komentar oleh uud | 16 Mei 2008 | Balas

  17. Kang, untuk header image gak ada masalah, tapi pada judul headernya kok gak gak bisa tampil maksimal/memanjang. apa masalahnya ya ? saran….

    Komentar oleh Briptu_PRIE | 23 Mei 2008 | Balas

  18. mas klo masukin banner yang berupa html ke header gmna?coz klo saya taruh di “tambah elemen halaman” header yang asli tetap muncul & klo kurubah sizenya yg ada di html gambarx tetap dagn ukuran semula dan yang berubah jarak antara baner dan header yang asli.oiya tambahan aku pake blogger versi baru.trims….

    Komentar oleh hak | 1 Juni 2008 | Balas

  19. kang, gimana klo mau teks judul blog nya biar gak muncul, masalahnya teks nya sudah ada di image header yang apen buat (seperti di blog nya kang rohman ini).
    mohon penjelasannya, terima kasih.

    Komentar oleh apen | 7 Juni 2008 | Balas

  20. pasangnya melalui add elemen, atau di bagian kode header di bagian kode HTML nya

    Komentar oleh Rohman | 8 Juni 2008 | Balas

  21. kang rohman
    bagaiamana caranya membuat tulisan yg bagus di kolom header

    mhn pencerahan nya
    T_Q

    Komentar oleh jaim553 | 13 Juni 2008 | Balas

  22. bang caranya buang halo scan gimana bang

    Komentar oleh Gendut Widodo | 2 Juli 2008 | Balas

  23. kenapa halo scan saya tidak keluar sekarang
    tapi kadang muncul kadang tidak

    Komentar oleh Gendut Widodo | 2 Juli 2008 | Balas

  24. Kang Rohman bagaimana biar blogku mudah dikunjungi pengunjung tolong bantuannya ya makasih

    Komentar oleh Vincentius Felix Christianto | 7 Juli 2008 | Balas

  25. Kang Rohman gamana sich caranya membagi kolom blog biar jadi 3 kolom??? (Postingannya biar ada ditengah dan 2 sidebar kanan dan kiri)

    Di tunggu jawabannya segera
    Makasi….:D

    Komentar oleh funday | 14 Juli 2008 | Balas

  26. salam kenal, kok saya bingung mas
    code seperti diatas kok gak da ya..

    sorry, new comer 🙂

    Komentar oleh setia1heri | 19 Juli 2008 | Balas

  27. Aduh!! bikin baner yang gak gerak aja belum berhasil dah di tunjukin yang bisa berubah-ubah, jadi bingung nich!tapi tetep terima kasih atas ilmunya kang!

    Komentar oleh SUNAN GESENG | 28 Juli 2008 | Balas

  28. eh apa template kang rohman yang unik tu gak bisa di kasih banner headernya? kalo emang bisa gmana caranya ya?

    Komentar oleh SUNAN GESENG | 30 Juli 2008 | Balas

  29. kang rohman,tambah lagi donk tutorialnya,biar ampe puas.apa aja lah pokoknya yang kang rohman bisa…

    Komentar oleh rurey_ganteng | 10 Agustus 2008 | Balas

  30. Assalamualaikum….. kang
    upami tiasa mah tutorialna lebih detail karena abdi masih pemula
    Wassalam

    Komentar oleh elbadr BLOG | 18 Agustus 2008 | Balas

  31. makasih infonya

    Komentar oleh solusi ekonomi | 30 Agustus 2008 | Balas

  32. wah salut ..pinter banget otak atik template,.sy tadinya trial and error cb letakkan kode html di template klasik..smp pusing sndri,karena salah meletakkan html..allhamdulliah akhirnya gol..

    Komentar oleh mike | 6 September 2008 | Balas

  33. Apakah hal ini juga berlaku bagi blog di wordpress.com
    Mohon penjelasannya cara menampilkan gambar pada header blog wordpress.com.
    Kirim ke e-mail : hairulef@gmail.com
    Terima kasih sebelumnya

    Komentar oleh tiens168 | 15 September 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: