Postingan tutorial blog kali ini, kita akan mencoba membuat iklan melayang pada footer blog. Awalnya, saya melihat iklan footer ini pada situs www.voa-islam.com dan terpikir untuk saya memasang hal yang serupa pada salah satu blog saya. Dan akhirnya, saya pun berhasil menerapkannya pada blog di alamat ebook.mampirbro.web.id. Jadi, setiap kali visitor mengunjungi blog sobat, maka secara otomatis sudah pasti melihat iklan tersebut dan juga dapat menghilangkannya dengan mengklik tombol close. Iklan footer seperti ini juga saya temukan dibeberapa situs besar Indonesia semisal Kompas, Detik, Tribunews, dsb yang juga memakai cara yang serupa. Ukuran besar iklan dapat sobat sesuaikan menurut lebarnya blog atau keinginan sobat.
Berikut Tutorialnya:
- Login ke akun blogger sobat.
- Kemudian pilih opsi "Rancangan/Design" dan pilih "Tambah Gadget/Add Widget" kemudian pilih "HTML/JavaScript".
- Selanjutnya, copas script dibawah ini pada kolom HTML/Javascript.
- Kode script berwarna merah adalah letak posisi gambar yang dapat sobat sesuaikan menurut selera.
- Kode script berwarna biru adalah url gambar iklan. Sobat dapat menggantinya dengan gambar iklan sobat punya sobat dengan ukuran berdimensi 973 x 48 pixels.
- Kode script berwarna orange adalah nilai transparan pada gambar iklan. Sobat dapat menyesuaikan angkanya sesuai selera.
- Kode script berwarna ungu diganti dengan alamat website tujuan apabila banner iklan di klik.
- Tak usah diberi judul/nama pada Judul HTML, biarkan saja kosong.
- Terakhir, klik tombol "Save".
<!-- AWAL FOOTER IKLAN -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 67px; z-index: 9999;'>
<div style='text-align: right; width: 983px; height: 15px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBrHnR8MPAv3YhgFJfLjngC8TJC-Rld30fNLs3njk6btdrHbdJ7KFTy_PF8wmaK5LyTEkxW4rkXA4hwEwng15-99ZaIH9ipBDpDBTpNooz4SmRg2_bIfjrkf0VCL8Rj6xagKyWXlC4Ng/s320/exit.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>
<a href=" ****url situs**** " target=" blank"><img src="http://mbpics.cu.cc/images/817ads.jpg" /></a>
</center></p>
</p>
</div>
<!-- AKHIR FOOTER IKLAN -->
*Ket:
Semua proses telah selesai. Sekarang coba sobat lihat blog nya kembali. Jika cara diatas berhasil maka otomatis iklan melayang pada footer telah muncul menghiasi blog sobat
Semoga berguna dan bermamfaatFollow twitter saya ya (twitter.com/mampirbro), ntar saya follow back
Gunakan layanan 4shared generator (klik di sini ) untuk mempermudah mendonwload file dari 4shared tanpa perlu login.
Makasih tutorialnya ,, saya save dulu linknya nanti kalo perlu saya akan peraktekan :d
@aa Solah: silahkan sob :)
makasih gan infonya
@Mita Sen: masama gan :)
makasik pencerahannya gan. ijin sedot ea :-D
@Manglayang: Sama2 gan :D