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..

85 comments:

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

    ReplyDelete
  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...

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

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

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

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

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

    ReplyDelete
  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.

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

    ReplyDelete
  10. Terima kasih tutorialnya mbak. Bermanfaat sekali.

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

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

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

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

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

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

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

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

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

    ReplyDelete
    Replies
    1. bisa tinggal dikecilin aja ukurannya ^^

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

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

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

    ReplyDelete
  23. kalo WP sama juga apa caranya??

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

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

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

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

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

      Delete
    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

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

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

    ReplyDelete
  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....

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

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

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

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

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

    mamacie, mak chaaa.. *kecupkecup*

    ReplyDelete
  35. Asik.. makasi mba ilmunya :)

    btw salam kenal ya mba

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  46. Kapan-kapan mau kucoba lagi ah naruh jejer di footer

    ReplyDelete
  47. Wih ngeri nih, jarang ada perempuan yang lincah ngoding HTML :D

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

    ReplyDelete
    Replies
    1. salam kenal, pak..
      hehehe banyak yang ngerti coding,...ini via gampangnya xD

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

    ReplyDelete
  49. mau langsung di praktekkin nih mak echa ...thank u ya

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

    ReplyDelete
    Replies
    1. Samain sama caranya persis mbak..pasti bisa...semangattt

      Delete
    2. Soale ini cara paling gampangnya

      Delete
  51. 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

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

    ReplyDelete
    Replies
    1. Pasti kodene kebalik dek...coba pelan2 dicek lagi ^^

      Delete
  53. Bertambah lagi deh pengetahuan tentang widget. Terima kasih banyak informasinya

    ReplyDelete
  54. makasih mbak echa ilmunya baru dipraktekin

    ReplyDelete
  55. baru sempet dipraktikin nih... makasih mak :)

    ReplyDelete
  56. Akhirnya..apa yang di cari di temukan. terima kasih sharingnya mba Echa ^_^

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

    ReplyDelete
  58. Kereeen tutorialnya...bookmark dulu ... trus dicobain...makasih mak ilmunya

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

    ReplyDelete
  60. Gilaaaa... bermanfaaaattttt!

    *menjura*

    ReplyDelete
  61. Keren banget tutorialnya, makasih, Cha!

    ReplyDelete
  62. cobah! lumayan sekali ini tipsnya

    ReplyDelete
  63. 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

    ReplyDelete
  64. Woho... akhirnya ketemu jga yng kucari..
    big thanks mbak Echa...

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

    ReplyDelete
  66. awesome blogger. saya suka tutorialnya :).

    Salam:
    UNDI LIFE EPISODE

    ReplyDelete
  67. Mau coba ah, semoga berhasil dan tampil syantik spt pny mba :p

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

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

    ReplyDelete

Monggo komen yoo... Mohon maaf link hidup saya hapus komentarnya.. ^^