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.
Artikel Terkait:
Blog Tutorial
- Alternatif Expand Template Widget
- Cara Membuat Widget Random Article
- Membuat Sendiri Aplikasi Android Untuk Blog
- Membuat Form Kontak Admin
- Pasang Tombol Sharing Lintas.Me
- Membuat Sendiri Aplikasi Symbian Untuk Blog
- Membuat Email Dengan Domain Sendiri Gratis
- Cara Mengarahkan Gambar Google Ke Blog
- Membuat Judul Blog Bergerak Di Browser
- Membuat Anti Select Text Pada Postingan
- Mengatasi Tata Letak Blog Yang Tidak Teratur
- Widget Free Proxy
- Cara Pasang Slider Carousel Di Blog
- Menampilkan Widget Hanya Pada Halaman Postingan
- Pasang Widget Follower Box Twitter
- Widget Random Ayat Al-Qur'an Di Blog
- Membuat Footer 3 Kolom Di Blog
- Widget Random Kata-Kata Mutiara Islami
- Parse HTML Tool
- Cara Praktis Pasang Foto Di Hasil Pencarian Google
- Pasang Meta Tag Friendly SEO Super
- Buat Flash Banner Online
- Cara Pasang Widget Pop-Up Di Tengah Blog
- Cara Upload File Flash Ke Google Site
- Widget Cek Lokasi Dari No.Handphone
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