Cara Membuat Iklan Melayang Responsive Dibawah Blog dengan Tombol Close

Sesuai judul diatas, kali ini saya akan membagikan tutorial cara memasang / membuat iklan melayang di bawah blog dengan tombol close.
Cara Membuat dan Memasang Iklan Melayang Responsive Dibawah Blog dengan Tombol Close
Cara Membuat Iklan Melayang Responsive Dibawah Blog dengan Tombol Close. (Gambar: AdityaTekno.com)

AdityaTekno.com - Sesuai judul diatas, kali ini saya akan membagikan tutorial cara memasang / membuat iklan melayang di bawah blog dengan tombol close dan iklan tampil responsive tentunya.

Membuat space iklan baik iklan banner dan text di bawah postingan atau dengan efek floating biasanya diterapkan pada blog yang sudah terkenal yang banyak menyediakan space iklan. 

Penggunaan posisi iklan semacam ini tentu saja untuk menghasilkan dan mencari keuntungan dari blog tersebut.

Baca Juga : Cara Memasang Banner Iklan Melayang Disamping Kanan Kiri Blog

Dan anda jangan khawatir kalo nanti loading blog menjadi lambat, karena dasar script pembuatan iklan melayang di bawah blog dengan tombol close ini sangat simple dan sederhana hanya menggunakan sedikit JavaScript dan tidak memerlukan perangkat jQuery library.

Nah, bagi anda yang tertarik mencobanya, silahkan simak tutorialnya dibawah ini.

Cara Membuat dan Memasang Iklan Melayang Responsive Dibawah Blog dengan Tombol Close

  1. Pertama, buka Blogger >> Tema >> Edit HTML.
  2. Letakkan kode berikut diatas / sebelum kode </body>
  3. <script type='text/javascript'>
    $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
    </script>
    <div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
    <div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='http://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
    <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
    <a href='#' title='Banner Iklan Disini'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='https://1.bp.blogspot.com/-gCPv2kRPw84/XhFTWBVolsI/AAAAAAAACFo/8s0eGpqmhBc5RG55yxS6GjBRgR3KKwtGACLcBGAsYHQ/s1600/banner-728x90-adityatekno.png'/></a>
    </div>
    </div>
    Catatan : Ganti kode #, Banner Iklan Disini, dan https://1.bp.blogspot.com/-gCPv2kRPw84/XhFTWBVolsI/AAAAAAAACFo/8s0eGpqmhBc5RG55yxS6GjBRgR3KKwtGACLcBGAsYHQ/s1600/banner-728x90-adityatekno.png sesuai keinginan anda. Dan jika anda ingin merubah lebar iklan, bisa ubah kode max-width:728px.
  4. Kemudian klik Simpan Tema.

Untuk melihat hasilnya seperti apa, bisa klik tombol dibawah ini.

Demikian Cara Membuat Iklan Melayang Responsive Dibawah Blog dengan Tombol Close. Semoga bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com

Baca Juga :