Cara Menciptakan Iklan Melayang Di Bawah Blog Dengan Tombol Close Dan Responsive
Cara memasang/membuat iklan (banner-text) melayang di bawah blog dengan tombol close dan iklan tampil responsive. Membuat atau menyediakan space iklan baik iklan banner dan text di bawah postingan atau dengan efek floating biasanya diterapkan pada blog yang sudah populer yang banyak menyediakan space iklan. Penggunaan posisi iklan semacam ini tentu saja untuk menghasilkan dan mencari laba dari blog tersebut.
Dasar script pembuatan iklan melayang di bawah blog dengan tombol close ini sangat simple nan sederhana hanya memakai sedikit JavaScript dan tidak memerlukan perangkat
jQuery library. Sehingga tidak akan mengganggu loading blog.
Hanya saja jikalau iklan (misalnya iklan banner) dengan lebar 728px atau 970px tampilannya menjadi terpotong jikalau tayang diperangkat mobile/ponsel. Maka dari itu pada tutorial ini ditambahkan beberapa sentuhan CSS semoga iklan banner tersebut akan tampil responsive untuk semua device.
Anda tertarik menambah space iklan melayang menyerupai yang dicontohkan pada gambar di atas? Mari ikuti caranya berikut ini.
1. Login ke blogger, masuk ke dasbor, klik Template Edit HTML.
2. Cari instruksi </body> dan letakkan instruksi berikut ini di atasnya.
4. Simpan template, lihat balasannya dengan membuka kembali blog.
Bagaimana, cukup praktis bukan? Demikian tutorial wacana cara menciptakan iklan melayang dengan tombol close di bawah blog. Semoga membantu dan sukses selalu.
Dasar script pembuatan iklan melayang di bawah blog dengan tombol close ini sangat simple nan sederhana hanya memakai sedikit JavaScript dan tidak memerlukan perangkat
jQuery library. Sehingga tidak akan mengganggu loading blog.
Hanya saja jikalau iklan (misalnya iklan banner) dengan lebar 728px atau 970px tampilannya menjadi terpotong jikalau tayang diperangkat mobile/ponsel. Maka dari itu pada tutorial ini ditambahkan beberapa sentuhan CSS semoga iklan banner tersebut akan tampil responsive untuk semua device.
Anda tertarik menambah space iklan melayang menyerupai yang dicontohkan pada gambar di atas? Mari ikuti caranya berikut ini.
Cara Membuat Iklan Melayang/Floating Ads Responsive dengan Tombol Close
1. Login ke blogger, masuk ke dasbor, klik Template Edit HTML.
2. Cari instruksi </body> dan letakkan instruksi berikut ini di atasnya.
<script type='text/javascript'> $(document).ready(function() {$('img#closed').click(function(){$('#btm_banner').hide(90);});}); </script> <!--start: floating ads--> <div id='floatads' style='width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999'> <div><a id='close-floatads' onclick='document.getElementById('floatads').style.display = 'none';' style='cursor:pointer;'><img alt='close' src='https://3.bp.blogspot.com/-ZZSacDHLWlM/VhvlKTMjbLI/AAAAAAAAF2M/UDzU4rrvcaI/s1600/btn_close.gif' title='close button'/></a></div> <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'> <!--Script iklan--> <a href='https://britablogger.blogspot.co.id' title='Banner iklan disini'><img style='max-width:100%;height:auto' alt='Banner iklan disini' src='https://4.bp.blogspot.com/-Af0Oi3py79s/VOtDq_sCXhI/AAAAAAAADcg/mE6LpkpQpbA/s1600/advertise-728x90.png'/></a> <!--Akhir script iklan--> </div> </div><!--end: floating ads-->- Kode yangberwarna biruadalah lebar iklan, jikalau ingin memasang iklan lebih lebar dari ukuran itu referensi 970px, ubah max-width:728px menjadi max-width:970px. Namun kalau lebar iklan lebih kecil dari 728px maka tidak perlu mengubah instruksi (ukuran) tersebut.
- Kode yang berwarna merahadalah script iklan, ganti dan sesuaikan dengan instruksi iklan anda.
4. Simpan template, lihat balasannya dengan membuka kembali blog.
Bagaimana, cukup praktis bukan? Demikian tutorial wacana cara menciptakan iklan melayang dengan tombol close di bawah blog. Semoga membantu dan sukses selalu.