mas template

Pasang Banner di Header Blog

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.

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)

banner maskolis

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
/* Header ———————————————– */
@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;
}
}
Jika sobat ingin menghapus garis yang berada di tepi banner, sobat 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;
}
  1. Klik tombol Pratinjau untuk melihat perubahan
  2. Jika sudah OK, klik tombol Simpan Perubahan Template
  3. Selesai.
Untuk template baru
Bagi anda 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 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;
}
}
  1. Klik tombol Pratinjau untuk melihat perubahan yang ada
  2. Bila sudah OK, klik tombol SIMPAN TEMPLATE
  3. 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 :
<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′>
  1. 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.  
Itu tadi sedikit gambaran dari saya tentang cara-cara memasang banner di bawah header blog kita. Semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

51 comments:

  1. makasi infony gan.....
    mantap!!

    please backlink>>
    http://www.cariuang-internet.blogspot.com

    ReplyDelete
    Replies
    1. mantap mas
      jangan lupa kunjungi www.rahasiadewasa.net

      Delete
  2. Mantab infonya gan

    jgn lupa untuk datang di blog ane

    http://izzihanif.blogspot.com/2011/12/7-hukuman-sadis-dalam-sejarah.html

    ReplyDelete
  3. sisikan sebelah mana gan ?
    oya buat temen yangt udah sukses comen di blok ku dong
    www.abu-uswah.blogspot.com

    ReplyDelete
    Replies
    1. gan klo ente mau pasang barner dri flashvortex cukup edit di header letakan script barner di paling atas. hasil http://www.jcowbesaba.blogspot.com

      Delete
  4. Mas Kolis, trimakasih atas sarannya. Skrg tampilan blog kami (sekarkampoeng.blogspot.com) sudah mendekati aslinya (Johny Storage). Hanya saya masih ada pertanyaan lagi. Bagaimana caranya memasang banner SWF di header template ini? Sudah saya upload file SWF di code.google.com, dan sudah saya pasang embed-nya spt di bawah ini pada widget paling atas.. tapi masih gak mau tampil.

    ReplyDelete
    Replies
    1. Ini code yg sy pasang:


      Masih gak mau tampil juga. Gimana ya kira2 solusinya?

      Delete
  5. Mantap sekali gan (y)

    Blog nya sudah saya follow, jngan lupa follback blog saya ya gan hehe

    http://unik86.blogspot.com/

    Di tunggu loh gan hehe

    Salam kenal :)

    ReplyDelete
  6. teng u gan.
    jikalau gan bersedia join
    bisa gan menyimpan html web saya gan :) jikalau tdk keberatan
    http://www.cristin8890.web.id

    ReplyDelete
  7. ok sip... hehe
    http://cosotricks.blogspot.com/

    ReplyDelete
  8. sipppp.. ini yang saya cari gan. TQ infona.. review dong gan di http://logammulia-emas.blogspot.com

    ReplyDelete
  9. makasih mas......
    entar saya coba.....
    by:softwaredidi.blogspot.com

    ReplyDelete
  10. kalo sama widget lagi gan bukan gambar bisa gak???

    ReplyDelete
  11. mas kolis bagus banget templatenya johny sip deh, tapi saya mau taruh gambar logo di bannernya biar gak kliatan sepi gimana ya mas?

    ReplyDelete
  12. cara nambahi manual gimana sob

    ReplyDelete
  13. mantab gen infonya .....
    klo ada waktu mampir juga ya
    http://bloggermbelong.blogspot.com

    ReplyDelete
  14. Mas,, tukar link..
    http://doming-huanzhu.blogspot.com/

    ReplyDelete
  15. mantap gan http://www.prediksibola888.blogspot.com/

    ReplyDelete
  16. wah saya pengen blog saya naik di google , kunjungi web saya healtygroup.blogspot.com

    ReplyDelete
  17. Masih Bingung Nieh.

    Ini Saya Pakai Template baru . Cuma Waktu Di Edit HTML Trus Ctrl+f : Find /* header . Ga Ada . Minta Petunjuknya , Sekalian tanya. Cara edit Banner Yg Original Dari Pihak Pembuat Templatenya Gmn ? .
    http://mataharimonth.blogspot.com/ <--- Itu. Mohon Di buka :)!

    ReplyDelete
  18. wah, keren artikelnya gan
    Bermanfaat banget
    Jangan lupa komentarnya di http://adeputra-pkp.blogspot.com

    ReplyDelete
  19. wah, keren artikelnya gan Bermanfaat banget

    ReplyDelete
  20. keren
    http://toszagentexpress.blogspot.com

    ReplyDelete
  21. caranya masang iklan benner yang paling rame pembelinya gimana y gan .

    ReplyDelete
  22. Maaf minta waktunya. Apa salahnya kalau kita mencoba. Iseng-iseng anda dapat menghasilkan tambahan finansial shobat. http://goo.gl/GuulX1

    ReplyDelete
  23. Thank you infonya...

    please visit www.manadosatunews.com

    ReplyDelete
  24. terimakasih tutorial nya gan , saya izin belajar dari blog agan , salam , bisnis pulsa

    ReplyDelete
  25. mantabb



    >>> mampir ya gan di blog saya http://trisnamaja.blogspot.com <<<

    ReplyDelete
  26. Produk di Jamin Asli.
    ELECTRONIC SOLUTION-SHOP.
    Menawarkan harga Promo , Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi Tam .Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya,
    Berminat Hub: Hotline/sms: 0857-7087-2865 ATAU KLIK WEBSET RESMI KAMI http://electronicsulution-shop.blogspot.com
    BlackBerry>Samsung>Nokia>Apple>Acer>Toshiba
    Led tvlg>Led tv Samsung>Nikon>Canon>DLL

    Dijual,
    Ready Stock !
    Blackberry Bold 9780
    Harga Promo Rp.1.500.000,-
    Ready Stock !
    BlackBerry Bold Curve 9300,
    Harga promo Rp.1.000.000,-
    Ready Stock !
    BlackBerry Torch 9800
    Rp.1.600.000,-
    Ready Stock !
    BlackBerry Z10
    Rp.3.500.000,-
    Ready Stock !
    BlackBerry Q 10
    Rp.4.000.000,-
    Ready Stock !
    Samsung Galaxy S3 Mini
    Rp. 2.700.000,-
    Ready Stock !
    Samsung Galaxy Ace
    Rp.1.400.000,-
    Ready Stock !
    Samsung Galaxy S2
    Rp.2.500.000,-
    Ready Stock !
    Samsung Galaxy S4
    Rp.4.500.000,-
    Ready Stock !
    Nokia 808 Pure View
    Rp.4.200.000,-
    Ready Stock !
    Nokia Lumia 820
    Rp. 2.700.000,-
    Ready Stock !
    Nokia Lumia 920
    Rp.3.400.000,-
    Ready Stock !
    Nokia Lumia 620
    Rp. 1.500.000,-
    Ready Stock !
    Apple iPhone 5G 16GB
    Rp.4.100.000,-
    Ready Stock !
    Apple iPhone 4G- 32GB
    Rp.3.500.000,-
    Ready Stock !
    Apple iPhone 3G-16GB
    Rp.2.900.000,-
    Ready Stock !
    Apple iPhone 4S-64GB
    Rp.4.000.000,-
    Ready Stock !
    Acer Aspire one 756
    Rp.1.400.000,-
    Ready Stock !
    Acer Aspire E1-471G
    Rp.2.800.000,-
    Ready Stock !
    Acer Aspire S5 Ultrabook Core 17
    Rp.7.000.000,-
    Ready Stock !
    Toshiba Satellite C800D-1006
    Rp.2.500.000,-
    Ready Stock !
    Toshiba Satellite C800D-1003
    Rp.1.500.000,-
    Ready Stock !
    Toshiba Satellite L840-1045XR
    Rp.3.700.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5100
    Rp 3.500.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5710
    Rp. 4.000.000,-
    Ready Stock !
    Led TV Lg 39 inch LN5100
    Rp. 3.000.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F5000
    Rp. 2.100.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F4000
    Rp.1.500.000,-
    Ready Stock !
    Nikon D5100+18-15Kit
    Rp 3.500.000,-
    Ready Stock !
    Nikon D3000 Kit 18-15mm VR
    Rp. 1.500.000,-
    Ready Stock !
    Nikon D3200 Kit 18-105mm VR
    Rp 3.100.000,-
    Ready Stock !
    Canon Eos 600D Kit EF-S 18-135mm
    Rp.3.800.000,-
    Ready Stock !
    Canon Eos 70D Kit EF-S 18-55mm is stm
    Rp.4.700.000,-
    Ready Stock !
    Canon Eos 600D Body
    Rp.2.500.000,-


    Kami melakukan Pengiriman barang lewat Tiki atau Jne ,Pos,Cargo,bagi luar kota,Ongkir ditanggung pembeli
    Berkat Anda Usaha Kami Jadi Semakin Lancar,Terima kasih telah berbelanja di Electronic Solution-Shop.

    Nikmati berbagai keuntungan berbelanja di sini.
    *Barang berkualitas dan harga relatif lebih murah
    *Dapat diantar ke seluruh indonesia
    *Keamanan di jamin karna setiap pengiriman di sertai asuransi proses cepat dan sederhana
    Barang di jamin 100% original baru dan bergaransi resmi.
    Selamat Berbelanja ! ! !

    ReplyDelete
  27. thanks gan
    backlin ya gan
    Belajar SEO Blog, Pendidikan, Teknologi, Komputer, Elektronika, Otomotif, Kesehatan, Bisnis Online, Adsense, Adwords, Anroid
    http://thazbhy.blogspot.com/

    Free download game, game pc, game terbaru, ps 2014,
    http://technogamecyber.blogspot.com/

    ReplyDelete
  28. makasih atas tutorialnya gan :D heheeee
    jangan lupa kunjungi blog saya juga ya ?!

    http://iqbalalisofyan98.blogspot.com

    ReplyDelete
  29. makasih banyak gan , kunjungi web kami : http://obatvimax-pembesarpenis.blogspot.com/

    ReplyDelete
  30. BANDAR TOGEL AMAN 100% DAN TERPERCAYA
    ==============================================
    8TOGEL.COM
    LIVE 24D..SINGAPURA..CAMBODIA.. SYDNEY.. CHINA
    BCA MANDIRI wd / Deposit 50000
    klik disini;;= http://referral.8togel.com/link.php?member=fudin5799
    ---------------------------------------------------------------------------------------
    TOTOBET4D
    SINGAPORA. MACAU. SYNEY
    BCA. MANDIRI. BNI. BRI Deposit 50000
    Klik disini;;= http://www.daracantik.com/?member=fudin5799
    ------------------------------------------------------------------------------------
    CMCBET.COM
    SINGAPORA..OSAKA..TAIPEI..CHNA
    BCA. MANDIRI. BNI. BRI. DANAMON / Deposit 50000
    Klik disini;;= http://referral.cmcbet.com/link.php?member=pudin5799
    -----------------------------------------------------------------------------------------
    12SHIO
    • SINGAPORE. HONGKONG. SYDNEY. PHILIPPINE. YOKOHAMA
    BCA. MANDIRI. BNI/ Deposit 50000
    http://www.12shio.com/link.php?ref=fudin5799
    ----------------------------------------------------------------------------------------------
    TOGELBET.NET
    SINGAPORE. TAIPEI. CAMBODIA. CHNA
    BCA. MANDIRI. BNI /Deposit 100000
    Klik disini;;= http://referral.togelbet.net/link.php?member=fudin5779
    ----------------------------------------------------------------------------------------------
    KING4D
    SINGAPORA . LAOS. BURMA. Toto36
    BCA . MANDIRI. BR.I BNI /Deposit 100000
    Klik disini;;= http://referral.king4d.com/link.php?member=fudin5799
    ----------------------------------------------------------------------------------------------
    TOGEL PLUS
    SINGAPORA. LAOS. 2D36. VIETPOOLS
    BCA. MANDIRI. BNI. BRI Deposit /100000
    Klik disini;;= http://referral.togelplus.com/link.php?member=fudin5799
    ----------------------------------------------------------------------------------------------
    IMCEBET
    SINGAPORA. MALAYSIA. TAIPEI. CHINA
    BCA. MANDIRI. BIN. BRI. DANAMON /Deposit 100000
    Klik disini;;= http://referral.imcbet.com/link.php?member=syaifuddin
    ----------------------------------------------------------------------------------------------
    TOTOST.COM
    SINGAPORE. TAIPEI. CAMBODIA. OSAKA
    BCA. MANDIRI. BNI. BRI. DANAMON/Deposit 100000
    Klik disini;;= http://referral.totost.com/link.php?member=fudin5779
    ---------------------------------------------------------------------------------------
    SAMKOKTOTO
    SINGPORE. PHILIPINE/ Deposit 50000
    http://referral.samkoktoto.com/link.php?member=fudin5799
    ----------------------------------------------------------------------------------------

    ReplyDelete
  31. Wahh trimakasih infonya, sekalian buat ilmu saya kelak
    Kunjungi juga http://peacewithreggae.blogspot.com

    ReplyDelete
  32. yes berhasil ,,
    bisa lihat penampakanya di blog saya teman
    Dunia wanita

    ReplyDelete
  33. mas kolis, numpang tanya gimana ya caranya menghapus banner yang ada di Jhony ganteng store tulisan "Welcome.. sama gambarnya" mohon bantuannya mas.. terimakasih.

    ReplyDelete
  34. sip
    http://andikvegas64.blogspot.com/

    ReplyDelete
  35. KAMI PASTI AKAN MEMBERIKAN ANGKA ANGKA TOGEL YG PATIEN,BAGI ANDA YG PERCAYA DG KAMI,MAKANYA DARI ITU KAMI MENGAJAK BAGI PARA TOGELER,UNTUK SEGERA MENGHANCURKAN SI BANDOT ( BANDAR TOGEL ) , SILAHKAN ANDA HUB ; KY SUGENG HARYONO DI 085218025454.TERIMA KASIH.

    ReplyDelete
  36. wah ini dia .. makasih mas
    "cara memperbesar penis"
    www.griyavimaxherbal.com

    ReplyDelete
  37. Nice untuk Infonya Gan, Ikuti Juga Perkembangan Berita Bola Terbaru dan Prediksi Skor Pertandingan di http://www.ajangbola.com/.

    Terima Kasih...!

    ReplyDelete
  38. Thanks sob...
    http://blog-medianet.blogspot.com/

    ReplyDelete
  39. mau dollar tanpa modal?? 100% gratis!!!!
    klik disini:
    http://genesismails.com/pages/index.php?refid=widyaningsih
    daftarkan email kamu dan langsung dapat $500
    dan ajak temen ikut dengan share link kamu atau daftarkan email apapun sebanyak-banyaknya...setiap 1 email yang mendaftar kamu dbayar $50
    dapatkan payout hingga $50.000 dikirim via Western Union,PayPal,DLL
    (kalau kamu rasa program ini bohong kamu nggak rugi apa2, toh nggak keluar modal/duit sepeser pun)
    Jadi tunggu apa lagi?? Ayo coba dan buktikan sendiri
    http://genesismails.com/pages/index.php?refid=widyaningsih

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger