Blog Cerita Cha Bercerita Tentang Hal-Hal Biasa

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGl90hvmPhuIz3Y5l_ta-y8P5cX_qsT5K-9rF5MpT-MJx9N82lao0OB-unhXwr4zaD6CwShPNGg-P-SfpAtk8Z_HniM7X48XJFdvzdRi9FRzYSh2LScuxdUlhjQaRZTwuIVlODQBGegKc/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_QY_LZFpzLBtwC5AciLFkr0lUaba8YW2HGDwB_bXJd63vkblEylHfB33lmLlxN2YKI3dgUuR0uymugLaKG0K6WWl1VYojFNMgqH3BAPcR-rBvE56x5lIpjMdFhh719o-N-9Eyx6AEtcI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGl90hvmPhuIz3Y5l_ta-y8P5cX_qsT5K-9rF5MpT-MJx9N82lao0OB-unhXwr4zaD6CwShPNGg-P-SfpAtk8Z_HniM7X48XJFdvzdRi9FRzYSh2LScuxdUlhjQaRZTwuIVlODQBGegKc/s1600/keb.jpg" width="125" height="125" /></a></td>

<td><a href="http://www.bloggerperempuan.com" target="_Top"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_QY_LZFpzLBtwC5AciLFkr0lUaba8YW2HGDwB_bXJd63vkblEylHfB33lmLlxN2YKI3dgUuR0uymugLaKG0K6WWl1VYojFNMgqH3BAPcR-rBvE56x5lIpjMdFhh719o-N-9Eyx6AEtcI/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..