Iklan Melayang Pada Footer Blog


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.


  • <!-- 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:
    • 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".


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 bermamfaatmenarimenarimenariFollow twitter saya ya (twitter.com/mampirbro), ntar saya follow back kenyit

6 comments:

Komentar lah dengan menggunakan kata2 yang sopan. Komentar mengandung SARA, kata kotor, pelecehan, spam & semisal'a akan dihapus. Thanks