Membuat Iklan Floating Dengan Tombol Close Di Footer Blog

Author:
Membuat Iklan Floating Dengan Tombol Close Di Footer Blog: Inilah cara Membuat Iklan Floating Dengan Tombol Close Di Footer Blog, Bila anda pernah melihat tool box seperti miliknya weebly atau tombol tombol sharing serta iklan yang berada di bagian bawah blog dengan keadaan yang tetap berada dibawah walaupun halaman ter-scroll kebawah keatas atau sebaliknya, nah berikut cara membuatnya :
Iklan footer melayang dengan tombol close

<!-- awal iklan footer-->

<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: 110px; z-index: 9999;'>

<div style='text-align: right; width: 735px; height: 3px;'>

<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnYlwnaC_Gw__hmcZIS1_poYiDJBOG1rAOohD_XvtHN5PkUcmXogNT1Y14KZCB-dbkRCIsjNZoht4ncyNF6EQF16uAWQ3g8lup0Hv9la2mxHYZsseduD6SMAAH5D902oyEeRzDC_YdZjh/s1600/close3.png'/></div>


<div style='clear: both;'></div>

<p>

<p><center>

Tempatkan kode iklan anda disini

</center></p>

</p>

</div>

<!-- akhir iklan footer -->


Penjelasan singkat tentang kode kode script untuk Membuat Iklan Floating Dengan Tombol Close Di Footer Blog diatas ( Perhatikan code yang dipertebal ) :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>

Ini adalah script jquery yang menjalankan perintah ( function ) untuk menutup atau meminimize kotak iklan yang akan kita buat, anda bisa mempelajadinya di halaman resmi jquery script di http://jquery.com/, Anda juga bisa mengikuti diskusi serta berbagi pengalaman melalui forum yang telah mereka sediakan.

$('#btm_banner').hide(90);
.hide (90) - angka 90 menunjukkan seberapa cepat bagian . elemen menghilang / void jika tombol close di klik, anda bisa melakukan percobaab dengan menggantikannya dengan angka 900,1000, atau berapapun yang anda mau, silahkan mencoba dan lihat hasilnya.

bottom: 0;
ini adalah kode css untuk memerintah elemen iklan yang kita buat agar selalu 0 pixel dari garis bawah screen, anda bisa menggantinya dengan top:0px untuk membuatnya berada diatas bagian screen, Selain itu anda juga bisa mencoba mengganti angka nol untuk menentukan jarak yang anda inginkan. ( silahkan mencoba !)

110px dan 775px
Ini adalah tinggi dan lebar kotak iklan yang akan kita pasang, silahkan mengganti sesuai kebutuhan anda.
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnYlwnaC_Gw__hmcZIS1_poYiDJBOG1rAOohD_XvtHN5PkUcmXogNT1Y14KZCB-dbkRCIsjNZoht4ncyNF6EQF16uAWQ3g8lup0Hv9la2mxHYZsseduD6SMAAH5D902oyEeRzDC_YdZjh/s1600/close3.png'/></div>

Ini adalah alamat URL dimana gambar Tutup / close berada, anda juga bisa mencoba menggantinya dengan huruf dengan membuat alt dan menghapus alamat gambar ini atau dengan cara lain yakni menggantinya dengan link yang anda inginkan ( tapi saya sarankan untuk tidak menggunakan link).

Lihat juga : Creating Static Footer / header With CSS - Div That Stay At The Bottom / Top of Page

Catatan terakhir :
1. Tutorial ini pertama kali di buat oleh ( ??? )
2. Setiap Ads network untuk publisher memiliki aturan berbeda tentang kebolehan menempatkan iklan pada bagian floating, silahkan periksa TOS pada masing masing publishing platform yang anda gunakan atau hubungi Cs mereka melalui email / kontak form yang disediakan.

Demikianlah cara Membuat Iklan Floating Dengan Tombol Close Di Footer Blog, Semoga bermanfaat.