Membuat Banner Melayang di Kiri atau Kanan Blog - Mungkin sobat pernah melihat blog yang memasang banner melayang di samping kiri atau kanan blog. Artinya, banner tersebut tetap diam pada tempatnya walaupun mouse di scroll ke bawah. Dalam istilah lain disebut fixed banner.

Ide postingan ini, saya dapatkan ketika mengunjungi web muslim.or.id, ada banner penjualan buku yang mengarah ke pustaka.muslim.or.id. Dari situlah muncul ide untuk membuat postingan ini. Walau pun mungkin telah banyak tutorial seperti ini, dengan kode yang berbeda. Untuk melihat penampakan dan demonya silahkan lihat  gambar di bawah.

membuat banner melayang di kiri atau kanan blog


Banner yang dipasang, bisa mengarah ke situs bisnis kita, ataupun mengarah ke postingan yang ingin selalu di tampilkan. Oke, simak cara mudahnya sob !

Membuat Banner Melayang di Kiri atau Kanan Blog


Pada tutorial ini saya memberikan 2 alternatif yaitu dengan "Menambah Widget HTML/JavaScript" atau "Edit HTML pada Template", silahkan pilih mana suka :)

A. Dengan Menambahkan Widget

Buat widget baru HTML/JavaScript, edit dan simpan kode ini
<style type="text/css">
#fixedbanner {
 position: fixed;
 top: 160px; /* Jarak dari atas */
 right: 0; /* Apabila ingin di kanan ganti right menjadi left */
}
</style>
<div id='fixedbanner'>
<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>
</div>

B. Dengan Edit HTML pada Template

1. Login ke Blogger
2. Klik Template --> Edit HTML
3. Simpan kode ini di atas ]]></b:skin>
#fixedbanner {
 position: fixed;
 top: 160px; /* Jarak dari atas */
 right: 0; /* Apabila ingin di kanan ganti right menjadi left */
}
4. Edit dan simpan kode ini di atas </body>
<div id='fixedbanner'>
<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>
</div>
5. Simpan Template.

Menambah Tanda Close (X)


Apabila ingin menambahkan tanda Close (X) seperti pada demo, tambahkan kode ini sebelum <div id='fixedbanner'>
<a href='#' onclick='var el=document.getElementById(&apos;fixedbanner&apos;);el.parentNode.removeChild(el);' style='right: 5px;position: absolute;top: 5px;z-index: 99;'><img alt='' src='http://3.bp.blogspot.com/-VkGc1slnj74/UOb46pZPv3I/AAAAAAAADqc/40iIDnF32Nw/s1600/delete2.png'/></a>
hasil akhir menjadi :
<div id='fixedbanner'>
<a href='#' onclick='var el=document.getElementById(&apos;fixedbanner&apos;);el.parentNode.removeChild(el);' style='right: 5px;position: absolute;top: 5px;z-index: 99;'><img alt='' src='http://3.bp.blogspot.com/-VkGc1slnj74/UOb46pZPv3I/AAAAAAAADqc/40iIDnF32Nw/s1600/delete2.png'/></a>
<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>
</div>

Semoga bermanfaat...

57 komentar

Haturnuhun kang.. kalau tanpa Edit HTML, misalkan pake widget gitu, bisa kang?

Balas

Keren kang... udah lama dicari yg ini, ntar dicoba deh

nuhun kang :)

Balas

Bisa sob, artikelnya sudah saya update... terimakasih masukannya

Balas

Sama sob... semoga tambah forexnya semakin maknyusss.... :)

Balas

link image sama tujuannya udah dipasang sob?

Balas

Saya bookmark dulu ya, sp tahu nanti kepake

Balas

silahkan sob... semoga bermanfaat

Balas

kalo mau di sidebar kanan dan kiri gimana kang?

Balas

trmkasih kang..dicoba dulu kang..

Balas

Ane nunggu kode untuk pasang sidebar kanan dan kiri Kang biar tambah ok....trims

Balas

Hatur nuhun kang... Saya coba tempatkan disamping hasilnya oke, tapi buat ads.

Balas

dicoba dulu..makasih bnyak untuk infonya kang

Balas

Ukuran banner ya bisa diatur manual pakai tambahan script gak kang? Terimakasih.

Balas

gan misal banner melayang disebelah kiri blog diinginkan lebih dari 1 banner itu gmn masalah'y??..apa perlu tambahan scrip ato gmn??...tolong penjelasan'y

Balas

trima kasih yah infonya, tapi bisa gk banner iklannya di satuin dengan blognya..??

Balas

sep....kang

www.OTODIDAKERS.blogspot.com

Balas

Gan ukuran banner melayang yang pasnya berapa X berapa ?
itu bentuknya vertikal apa horisontal??
thnaks

Balas

Numpang makek kang..
Salam dari blogger Lombok -> click-ganda.blogspot.com

Balas

Kalo pgn di pasang center di tengah blog gmn caranya kang.........?? makasih

Balas

waduh ..
bnyk yg spam di atas tuh kang ..
jadi gag enak liat nya ..

Balas

terima kasih kang,, akhirnya ane bisa pasang di forum ane
de-cyber.com

Balas

makasih kang tutorialnya,, :)

Balas

Terima kasih kang tutor'y...
follow juga ya blog ane http://gendir49.blogspot.com

Balas

Mau tanya kang kira2 apa boleh untuk dipasangin kode iklan dari kliksaya ya kang? apa ini termasuk banner melayang yang dilarang oleh kliksaya. makasih www.rakatalenta.com

Balas

kalau liat TOS nya kayaknya ga boleh ya, coba tanya fihak KlikSaya aja sob :)

Balas

Terima kasih sob! sudah saya pasang tapi soal tanya ke pihak Kliksaya belum. Salam kenal

Balas

oke sob
http://bengkeltralisdki.blogspot.com/

Balas

thnks infonya kang...
kunbal blog ane donk
http://yogagj.blogspot.com
follow juga ya, hehehe

Balas

mantap kang tutorialna. :)
izin share ulang kang. hatur nuhun. . :)

Balas

thx info'y sob http://duniagame7.blogspot.com/

Balas

Tq kang tutorialnya tentang mmbuat banner melayang di kiri / kanan blog..
sukses selalu :)

Balas

makasih kang artikelnya .... salam blogger

Balas

thank you very muck dear http://www.khmerleadership.org/

Balas

kang kalo dipasang berdua kok gak bisa ya kang
jadi muncul salah satu
tolong intip kang www.javapoker.org

Balas

terimakasih kang tutorialnya, ternyata pakai script adsense juga bisa melayang padu dikanan dan dikir

Balas

Sorry, but Banner(ADS) override sliderbar, image https://lh5.googleusercontent.com/-YxhoAKFTrsM/Us2glgTaq_I/AAAAAAAAWnQ/rUC_Ch3PkFs/w346-h192/sliderbar.PNG

Balas

just mak 'wrapper' smaller :D

Balas

mas bs nggak dijelaskan tulisan yang berwarna merah diatas seperti URL Tujuan dan yang lainnya, maklum newbie. tolong bantu sy.

Balas

joss kang... langsung saya adopsi nih tipsnya.....

Balas

Kang.. Kalo mau di kanan dan kiri secara bersamaan bagaimana ya kodenya ? mohon dibantu kang. terima kasih kang.

Balas

Makasih kang ismet untuk tutornya...
Sukses selalu ya kang...
Mampir-mampir kang ke : www.konveksijakarta.com

Balas

mkasih infonya..langsung coba

Balas

salam kenal kang ismet... saya sdh coba kode buat close tp kok gak bisa" ya kang.. :D , mhn pencerahan kang untuk kita yg nulis di wordpress :) . ini blog saya kang... http://iyuswebee.wordpress.com/ . matur nuwun.....

Balas
Komentar ini telah dihapus oleh pengarang.

Seharusnya untuk yang A bisa kang, tinggal tambahkan wigdets trus pilih text.
Kalau untuk yang B harus edit style.css dan header.php dulu kang.
Ane juga pengguna wordpress. Kalau mau mampir monggo http://portalinspirasi.com

Balas

maaf gan.. saya msh newbie ini hehe, letak style css dan header.php di mana ya? oiya wordpress saya gratisan ya gan... blm .com :) . yg saya tanyakan, apa di wordpress GRATIS bisa jg buat gambar/tulisan melayang + close nya?mohon pencerahan.... matur nuwun..

Balas

kalau wordpress yang biasa tidak ada editornya kang. jadi nggak bisa.
mending pakai hosting gratisan dari idhostinger atau apapun hosting yang gratis. setelah itu instal wordpress.
jadi akang bisa leluasa edit templatenya :)

Balas

hehe kirain di wordpress gratis bisa gan.. :D , berharap nih smg master" blog bisa nemuin caranya ya gan hehehe. mksh banyak gan atas pencerahannya... :)

Balas

Poskan Komentar


×
Chat