Cara Memasang Banyak Banner dalam Satu Widget HTML


Cara memasang banyak banner dalam satu widget HTML. Ada yang bergabung pada banyak komunitas atau banyak mengikuti lomba seperti saya? Pasti kita diminta untuk memasang banner sebagai tanda keanggotaan grup atau keikutsertaan dalam suatu lomba. Betul tidak?


Iya kalau ikutnya cuma satu, kalau banyak bagaimana? Yang ada tampilan blog kita jadi penuh dan mengurangi keindahan template SEO kan? ^^. Biasanya saya meletakkan banner masing-masing pada setiap widget. Cuma kok rasanya 'sesak' ya tampilannya.

Saat berkunjung ke blog mbak Uniek. Ternyata dia memberitahu saya bagaimana caranya meletakkan banyak banner pada satu widget saja dengan tampilan banner vertikal. Dan masing-masing banner itu ngelink ke komunitas atau lomba yang diikuti. Big thanks to mba uniek :*

Nah, saat saya mengikuti step-stepnya, ternyata kok kurang pas ya diblog saya. Akhirnya saya gugling (namanya juga otodidak :D) bagaimana cara memasang banner dalam satu widget secara horizontal. Karena kebetulan saya mengikuti banyak komunitas dan lomba jadi mau tidak mau harus pasang kan? Kalau vertikal banner samping jadi panjang banget --"... Nggak cantik minimalis lagi dong nanti xD...

Dan akhirnya, saya bisa menampilkan banyak banner (tentunya dengan link keluar ke masing-masing komunitas atau lomba) diblog saya secara horizontal ditaruh difooter blog ^^.

Tampilan banner dalam satu widget HTML diblog saya. Kece kan?
Keuntungan banyak banner dalam satu widget ini praktis, cuma awalnya aja yang mbingungi hehehe.. Tapi nanti gampang ^^. 

Ya udah, ini dia cara memasang banyak banner dalam satu widget HTML!

1. Upload semua banner (format jpg/png ) yang akan digunakan. 
Ini bisa menggunakan photobucket atau kalau saya pakai cara praktis yaitu dipostingan blog biasa saja tapi simpan didraf jangan dipublish yaaa... Kadang ada sih yang sudah ngasih kodenya..tapi kebetulan saya lebih suka menggunakan kode dari blog/ sumber aplot punya sendiri.. Karena lebih mudah seo juga seh hehehe piss...

Ubah format ke text (bukan compose), nanti disana akan terlihat letak script kode masing-masing banner. Saran saya copy script kode masing-masing banner ke notepad biar gampang.


 Letak kode banner jpg atau png didraft postingan tadi
Silahkan diperbesar biar jelas


2. Add widget lalu pilih insert HTML di page element/ tata letak 

 


3. Sekarang mau tampilan bagaimana? Vertikal atau horizontal terserah kita ^^.
Saya beri caranya semua ya...Dicocokkan saja dengan tampilan blog kita ^^.  
Keterangan : 
Url tujuan itu adalah url yang mengarah pada link keluar masing-masing komunita satau lomba. Url link banner itu letak kode banner yang tadi disimpan didraft.
Ukuran banner itu besar banner yang kita maui.
Yang diperbanyak adalah script untuk masing-masing banner yang bisa kita perbanyak sesuai kebutuhan. Tinggal diubah letak url banner jpg/png sama url tujuan aja ..Selesai ^^


Untuk tampilan secara vertikal, insert kode html dibawah ini :


<div align="center"><a href="http://emak2blogger.web.id/"  rel="nofollow" target=“_blank”><img src="http://2.bp.blogspot.com/-vdgWgTUdxoI/VhKQWNRN1nI/AAAAAAAAZIA/GMt1Oyw1yp0/s1600/keb.jpg" height="“250”" width="“250”" border="0" rel="nofollow" target="“_blank”/" /></a></div> <br />

<div align="center"><a href="http://bloggerperempuan.com/" rel="nofollow" target=“_blank”><img src="http://3.bp.blogspot.com/-K6DLduVVhtg/VhFTuton_PI/AAAAAAAAZGA/3i3M7IE-zc0/s1600/bp.jpg" height="“250”" width="“250”" border="0" rel="nofollow" target="“_blank”/" /></a></div> <br />



Penjelasan script kode vertikal
Silahkan diperbesar biar jelas


Dan tampilan banner vertikal disamping akan seperti ini : 
 
Untuk kode widget horizontal masukkan script HTML ini

<table border="0" bordercolor="#111111" cellpadding="2" cellspacing="0" style="border-collapse: collapse; width: 383px;">

<tr><td><a href="http://www.emak2blogger.web.id"><img src="http://2.bp.blogspot.com/-vdgWgTUdxoI/VhKQWNRN1nI/AAAAAAAAZIA/GMt1Oyw1yp0/s1600/keb.jpg" width="125" height="125" /></a></td>

<td><a href="http://www.bloggerperempuan.com" target="_Top"><img border="0" src="http://3.bp.blogspot.com/-K6DLduVVhtg/VhFTuton_PI/AAAAAAAAZGA/3i3M7IE-zc0/s1600/bp.jpg" alt="" width="125" height="125" /></a></td>

</tr></table>

Penjelasan script kode html horizontal
 Silahkan diperbesar biar jelas

Dan tampilannya banner horizontal akan seperti ini ^^
Seperti tampilan difooter blog saya ^^

 


Saran saya, baca postingan ini sambil didepan komputer ya ^^.. Biar sekalian dicoba

Nah, gampang kan memasang banyak banner dalam satu widget HTML saja ^^... Selamat mencoba ya ^^. Happy blogging..

94 komentar:

  1. Bookmark! Besok praktek. Blogku kagak ciamik bener banyak widget kagak beraturan. Hihi. Suwun banget nggih mbakyuuu :)

    BalasHapus
  2. Makasih Mbak atas infonya ini... Aku simpan dulu ya..soalnya dah tengah malam, ntar utak-atik blog malah kacau, hehe... nunggu esok pagi aja.. Btw, menurutku tampilan horisontal lebih manis ya karena masih dalam satu widget...

    BalasHapus
  3. Dengan tampilan seperti ini tentunya membuat tampilan blog juga jadi lebih simple ya. tapi sayang, saya jarang ikut lomba :-(

    BalasHapus
  4. Qiqiqiqi ngerti banget deh ah widgetku ga karuan.. thanks mba echa

    BalasHapus
  5. Oh ya, punyaku tinggal pake kode table aja. Sip. Tengkyuuuuu :*

    BalasHapus
  6. Lebih rapi ya tampilannya kalau dijadikan satu. Makasih tutorialnya.

    BalasHapus
  7. memasang banner perlu penempatan yang pas juga ya Cha, Makasih ya Cha tutorialnya keren

    BalasHapus
  8. Nah... ini dia yang sedang saya cari. Benar bangad yang Mbak bilang, tampilan blog jadi kaya gimana gitu kalau ikut banyak lomba terus diwajibkan pasang banner.

    Makasih Mbak untuk sharingnya, nanti saya coba praktekkan.

    BalasHapus
  9. Nyoba ahhhh biar ga berantakan. Ketahuan malas ngerapihin blog :)

    BalasHapus
  10. Terima kasih tutorialnya mbak. Bermanfaat sekali.

    BalasHapus
  11. ih, echa tau aja kalo aku gak bisa bikin banner jadi sebaris gitu..
    makasih udah ngasitau ya, nanti aku cobain :)

    BalasHapus
  12. Simpennn...ntar praktekin..tfs mbak :)

    BalasHapus
  13. salah satu cara yang paling mudah dimengerti niiih.. ;)

    BalasHapus
  14. mantab jaya mak eca, nyobak ah, tfs yak

    BalasHapus
  15. Aduh bukanya pakai tab, bookmark dl ntar balik lg buat praktej

    BalasHapus
  16. betul, kalau mau coba langsung praktek.. biar nempel. hehehehe

    BalasHapus
  17. mudah sekali ya mbak cha... :)

    BalasHapus
  18. Akkk pusing sama kode2 mbakkkk :'((((

    BalasHapus
  19. Mak Echa ini berarti bisa dipakai juga buat tab socmed biar jadi satu baris ndak sih mak?

    BalasHapus
  20. Makasi mak infonya. Butuh bgt buat sy yg newbie

    BalasHapus
  21. Wokeh... Bookmark dulu. Makasih mak echa cantik *kiskis*

    BalasHapus
  22. Saya sudah dijadikan satu laman kalau untuk banner komunitas blog ^^

    BalasHapus
  23. kalo WP sama juga apa caranya??

    BalasHapus
    Balasan
    1. Sama didraft juga nanti liat kode jpgnya aja
      Sisanya mirip kayak insert widget wp biasa

      Hapus
  24. Wah, makasi mbak e, aq juga bingung saking banyaknya banner, jadi penuh sesak kesannya

    BalasHapus
  25. bookmark dulu. ntar siangan mau dipraktekan. makasih mbak...

    BalasHapus
  26. Pakai wp bisa gak ya? tapi blogku sekarang emmang gak dipasang footernya. Ntar coba aahh

    BalasHapus
    Balasan
    1. nah ini, kasusnya mba orin sama denganku.. ga ada footernya.. piye kalo masang?

      Hapus
    2. Pilih template yang ada footernya mba...aku kurang paham nambah footer di wp... Kalo blogspot bisa... Tapi wp kayaknya bisa jg...soalnya dia kan lebih friendly sebenarnya

      Hapus
  27. Terimakasih Mbak, sangat meembantu,, save dulu, kalo ada free time boleh dicoba.. :)

    BalasHapus
  28. Aku mau nyoba ahh biar tampilan blognya makin keren dan pastinya lebih rapi. Thanks for sharing mbak Cha ^___^

    BalasHapus
  29. Sip... makin cantik tampilannya klo banner bisa dijejerin gini ya Cha :) Aku mau nyobain juga scriptmu yg horizontal itu. Kemarin udah nyoba, setting ukuran pic nya udah dikecilin, tp koq tetep ga mau ya berjejer rapi. Klo udah ga buthek lagi nunggu gajian baru bisa utak-atik lagi deh kayaknya bhahahaaa....

    BalasHapus
  30. Bisa dicoba tuh tipsnya, biar ga menuh2in tempat juga. Blognya sudah tak follow ya mak cantik :P

    BalasHapus
  31. saya baru make utk icon sosmed itu mbak. kl banner2 baru kepikiran stlh baca ini. tfs ya mbak.

    BalasHapus
  32. saya baru make utk icon sosmed itu mbak. kl banner2 baru kepikiran stlh baca ini. tfs ya mbak.

    BalasHapus
  33. Lah, punyaku juga berjejalan tuh, sampe bingung mau narok di mana lagi. Makasih mba Echa :)

    BalasHapus
  34. sippp.. makasih, makkkk.. udah langsung dicoba, dan berhasil berhasil berhasil hore..

    mamacie, mak chaaa.. *kecupkecup*

    BalasHapus
  35. Asik.. makasi mba ilmunya :)

    btw salam kenal ya mba

    BalasHapus
  36. Pengen coba utak-atik juga kalau udah gak begitu riweuh..
    TFS Mak Cha...

    BalasHapus
  37. ealaah gitu toh caranya makasih mbak infonya ;)

    BalasHapus
  38. Mak echa, sudah saya coba dan berhasil. makasih ya mak..
    cuma sekarang lagi bingung cara buat bikin ditengah gimana yaa.. hehe

    BalasHapus
  39. Makasih mba Echa. Ntar aku cobaa ;D

    BalasHapus
  40. Terima kasih infonya mbak Echa... Masuk Bookmark dulu nanti malam di coba. :-)

    BalasHapus
  41. baru mau komplain banner KEBnya masih lama eh dibawah ada yang baru :)

    BalasHapus
  42. coba ah nanti,makasih mak sharingnya^^

    BalasHapus
  43. Ei sih so far masih ok pakai yg vertikal, tapi boleh dicoba nih kalau suatu saat bosen dan pengen yg horizontal. Tfs yaaaa

    BalasHapus
  44. Bermanfaat banget ilmu nya, Thx u

    BalasHapus
  45. saya bacanya melongo aja tuh mbak...
    belum tahuuu...apa sih itu... *garuk-2 kepala... :)

    BalasHapus
  46. lebih praktis dan sedap dipandang memakai tips cantik memasang banner ala emaak echa canteeek :)

    BalasHapus
  47. Kapan-kapan mau kucoba lagi ah naruh jejer di footer

    BalasHapus
  48. kudu belajar nih *emaklemot :D

    BalasHapus
  49. Wih ngeri nih, jarang ada perempuan yang lincah ngoding HTML :D

    Salam kenal, saya juga suka ngotak-ngatik pemrograman, hehe

    BalasHapus
    Balasan
    1. salam kenal, pak..
      hehehe banyak yang ngerti coding,...ini via gampangnya xD

      Hapus
  50. Aplikatip banget,
    Secara sdh lama kepikiran utk merapikan banner-banner. Sekarang br ganti template, banner-banner masih belum terpasang semua

    BalasHapus
  51. mau langsung di praktekkin nih mak echa ...thank u ya

    BalasHapus
  52. duh kok ga ngerti ya mak...saya coba nih malah mentok, mau ganti logo keb baru :((

    BalasHapus
    Balasan
    1. Samain sama caranya persis mbak..pasti bisa...semangattt

      Hapus
    2. Soale ini cara paling gampangnya

      Hapus
  53. Buat emak2 kayak aku kok tetep ribet ya...heuheu sdh udzur jadi males mikir kayak ginian... btw makasih ya Mba Echa tutorialnya yg ini sdh yang termudah ya..hahaha.... nanti aja deh kalau lagi tenang ngerjain nya...insya Allah pasti bisa...*nyemangatinsendiri

    BalasHapus
  54. Udah coba, berhasil, tapi yg harusnya Horizontal malah jadi vertikal padahal udah cek ricek kodingnya bener, bagian mana yg salah ya? :'(

    BalasHapus
    Balasan
    1. Pasti kodene kebalik dek...coba pelan2 dicek lagi ^^

      Hapus
  55. Bertambah lagi deh pengetahuan tentang widget. Terima kasih banyak informasinya

    BalasHapus
  56. makasih mbak echa ilmunya baru dipraktekin

    BalasHapus
  57. baru sempet dipraktikin nih... makasih mak :)

    BalasHapus
  58. Akhirnya..apa yang di cari di temukan. terima kasih sharingnya mba Echa ^_^

    BalasHapus
  59. Mbak Echa, gambar yg di upload di blogpost tu perlu di atur bersisihan dulu ga? Atau yg pengting upload aja?

    BalasHapus
  60. Kereeen tutorialnya...bookmark dulu ... trus dicobain...makasih mak ilmunya

    BalasHapus
  61. echa tau aja nih keinginanku, dah lama nyari cara biar simple, thank ilmunya :-)

    BalasHapus
  62. Gilaaaa... bermanfaaaattttt!

    *menjura*

    BalasHapus
  63. Keren banget tutorialnya, makasih, Cha!

    BalasHapus
  64. cobah! lumayan sekali ini tipsnya

    BalasHapus
  65. Iya nih simple ya. Di blog saya yang dulu padahal udah dibikin kayak gitu, cuma agak2 males ngotak-ngatik blog hehehe. Jadi tampilan sekarang ya seadanya :D

    BalasHapus
  66. Woho... akhirnya ketemu jga yng kucari..
    big thanks mbak Echa...

    BalasHapus
  67. asik kalau nanya kasihan yg jelasin belum tentu saya mudeng, untung ada artikel mbak Echa

    BalasHapus
  68. awesome blogger. saya suka tutorialnya :).

    Salam:
    UNDI LIFE EPISODE

    BalasHapus
  69. Mau coba ah, semoga berhasil dan tampil syantik spt pny mba :p

    BalasHapus
  70. Kalo wordpress pie mak? Aku suka frustrasi ama wp deh..angel banget tp males klo harua bikin baru :(

    BalasHapus
  71. Beneer banget, lebih rapih dan indah dipandang.
    Dooh jadi lupa dengan banner2 aku baru ganti template, otak atiik dolooo

    BalasHapus
  72. Mau nanya nih mba / mas :) gimana cara nambah banner nya lagi ya .. itu kan 2 biji banner nya .. kalo mau di tambah 1 /2 lagi gimana ya mba/mas , mohon petunjuk nya , terima kasih

    BalasHapus
    Balasan
    1. Tinggal tambahin saja seperti sebelumnya mas kodenya


      Hapus
  73. makasih infonya, bookmark dulu ntar pas mau nyoba gak susah-susah nyarinya. bermanfaat

    BalasHapus
  74. Wah3x Echa ini emang blogger yang hhemmm brilliant banget dah. Harus balik lgvke sini, baca lagi sblm dipraktekkin diblogbyg lumutan,hehehe... Blog yg aktif templatenya aja bikin bingung... MkshvCha, tutorialnya.

    BalasHapus
  75. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  76. Terimakasih, sudah saya praktekkin :D

    BalasHapus
  77. terima kasih..
    akan coba saya praktekan

    BalasHapus
  78. Masya Allah saya akan coba praktekan

    BalasHapus
  79. Terima kaasih informasinya sangat bermanfaat sekali.

    BalasHapus

Monggo komen dengan bahasa sopan yoo... Mohon maaf juga link hidup saya hapus komentarnya.. ^^