Membuat Banner Melayang di Kiri atau Kanan Blog
0 views
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.
Banner yang dipasang, bisa mengarah ke situs bisnis kita, ataupun mengarah ke postingan yang ingin selalu di tampilkan. Oke, simak cara mudahnya sob !
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
B. Dengan Edit HTML pada Template
1. Login ke Blogger
2. Klik Template --> Edit HTML
3. Simpan kode ini di atas
Apabila ingin menambahkan tanda Close (X) seperti pada demo, tambahkan kode ini sebelum
Semoga bermanfaat...
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.
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('fixedbanner');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('fixedbanner');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...
51 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Sukses selalu ya kang...
Mampir-mampir kang ke : www.konveksijakarta.com
jadi muncul salah satu
tolong intip kang www.javapoker.org
sukses selalu :)
izin share ulang kang. hatur nuhun. . :)
kunbal blog ane donk
http://yogagj.blogspot.com
follow juga ya, hehehe
http://bengkeltralisdki.blogspot.com/
follow juga ya blog ane http://gendir49.blogspot.com
de-cyber.com
bnyk yg spam di atas tuh kang ..
jadi gag enak liat nya ..
Salam dari blogger Lombok -> click-ganda.blogspot.com
itu bentuknya vertikal apa horisontal??
thnaks
www.OTODIDAKERS.blogspot.com
jasa pembuatan banner Gif
nuhun kang :)