Cara Membuat Banner di sebelah kanan kiri blog

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 teman gua lagi rame rame-nya buat blog sebagai sarana berbagai ilmu ,setelah gua kasi tau kalau dari blog itu kita bisa dapat uang dengan kurs dolar, mungkin yang membuat mereka tertarik tuk buat blok karena gua bilang "Kita bisa dapet uang dengan nominal 4-5 dolar dari adf.ly". berikut contoh gambar hasil trik yang saya pakai,




baner yang ini ukuranya lebih dari 160X600 Px, jadi kelihatanya makan tempat banget,

kalo bner yang satu ini ukuranya 160X600 cukup ramping simple dan cukup menyampaikan keinginan kita pada para pengunjung,





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

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJpPXRlaIQTVOMxdQnlx-4q4UdTBjPHXPlj7jUzZMB2tlDVtBtHCLWy6SP_18eFIiguiWNrnPfJy1SdqoaAFsfzfRkCQVShcqoXBhMptHMnykWsQZQYx62laIUdlx7CZwiJEPy4Pwf-Lw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJpPXRlaIQTVOMxdQnlx-4q4UdTBjPHXPlj7jUzZMB2tlDVtBtHCLWy6SP_18eFIiguiWNrnPfJy1SdqoaAFsfzfRkCQVShcqoXBhMptHMnykWsQZQYx62laIUdlx7CZwiJEPy4Pwf-Lw/s1600/delete2.png'/></a>
<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>
</div>

Semoga bermanfaat...


sumber ; ini

dengan beberapa pengeditan,

jangan lupa bantu saya untuk masuk ke adf.ly dengan klik "skip ad" setelah klik salah satu banner di blog saya ini dan bloger yang baik adalah Bloger yang meninggalkan jejaknya berupa komontar. thanks