Cara Membuat Banner Iklan Melayang

REDAKSIHOT    Kamis, Desember 05, 2019   Blogger , Tutorial      

ACEH | Pada kali ini saya akan menjelaskan bagaimana Cara Membuat Banner Iklan Melayang Responsive dengan Tombol Close di Blog yang bisa anda gunakan untuk meningkatkan performa iklan Anda.

Banner iklan yang akan saya bahas disini bersifat melayang atau sticky dengan ukuran yang dapat menyesuaikan secara otomatis dan terdapat tombol close di bagian atas untuk menghilangkan banner iklan tersebut apabila pengunjung merasa terganggu.

Iklan banner yang melayang yang terdapat tombol close mungkin sering Anda temukan di situs-situs besar. Bagi Anda yang ingin memaksimalkan iklan terutama iklan dari Google AdSense, maka widget banner ini mungkin bisa anda coba.

Cara Membuat Banner Iklan Melayang
Silahkan buka dasbor Blogger, kemudian pilih menu Template, lalu klik Edit HTML. Silahkan salin kode dibawah ini dan tempatkan sebelum kode pada template Anda

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKUVuxH_Fx_MFA_bkfpApx8x_Fn77C7IisW5sNf-wDIDZSVDarAOTjgkKNenzPqb1VFoeW10qAmuWJ_DxkrEpzVfC1YhHnlmn8gUwLwJl4-dchmrqJOwuhMAeXELh4G92le0Myp2aT4GfX/s1600/btn_close.gif' title='tutup' 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='Judul Iklan'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Judul Iklan' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgsrXtz7Bj8isbh-Qhi6VxYw5ScnmufNHDLT3KLPzmB8Mm1Qg1BwLVlKqMZ0FxMZfF3iq7RtbSw4OfV4O8kAeiw37YZoUQl6LfsfgmsF81irZtMb5LdDhZj4CQN52XyS-g19OgyoJr9cM/s1600/banneriklan728.png'/></a>

</div>

</div>

Selanjutnya, silahkan Simpan Tema, kemudian lihat hasilnya.

Membuat banner iklan yang melayang memang mudah. Apabila Anda tidak ingin menampilkan banner iklan ini di tampilan versi mobile, maka silahkan gunakan kode dibawah ini:

<b:if cond='data:blog.isMobileRequest == "false"'>

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKUVuxH_Fx_MFA_bkfpApx8x_Fn77C7IisW5sNf-wDIDZSVDarAOTjgkKNenzPqb1VFoeW10qAmuWJ_DxkrEpzVfC1YhHnlmn8gUwLwJl4-dchmrqJOwuhMAeXELh4G92le0Myp2aT4GfX/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgsrXtz7Bj8isbh-Qhi6VxYw5ScnmufNHDLT3KLPzmB8Mm1Qg1BwLVlKqMZ0FxMZfF3iq7RtbSw4OfV4O8kAeiw37YZoUQl6LfsfgmsF81irZtMb5LdDhZj4CQN52XyS-g19OgyoJr9cM/s1600/banneriklan728.png'/></a>

</div>

</div>

</b:if>

Jika Anda ingin menampilkan iklan dari Google AdSense, maka gunakan kode dibawah ini:

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKUVuxH_Fx_MFA_bkfpApx8x_Fn77C7IisW5sNf-wDIDZSVDarAOTjgkKNenzPqb1VFoeW10qAmuWJ_DxkrEpzVfC1YhHnlmn8gUwLwJl4-dchmrqJOwuhMAeXELh4G92le0Myp2aT4GfX/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'>

Letakkan kode iklan adsense anda disini

</div>

</div>

Demikian pembahasan mengenai Cara Membuat Banner Iklan Melayang Responsive semoga bermanfaat untuk Anda. Jika ada hal yang ingin ditanyakan, silahkan bertanya pada kolom komentar dibawah ini.