Cara Membuat Iklan Melayang di Blog Responsive - Setiap blogger tentu memiliki harapan bahwa blog yang mereka buat akan diterima oleh Google Adsense, sehingga mereka dapat memasang iklan dan menghasilkan uang dari klik pengunjung. Untuk mencapai tujuan ini, banyak blogger yang rutin melakukan update artikel setiap hari dan berusaha meningkatkan trafik organik agar lebih mudah diterima oleh Adsense. Karena memiliki trafik yang banyak akan mempermudah mereka untuk menghasilkan pendapatan dari blog melalui klik pengunjung yang banyak.
Penghasilan seorang blogger tidak terbatas pada Google Adsense saja, karena masih ada banyak jaringan iklan lain yang dapat digunakan seperti MGID, Optad360, A-Ads, dan masih banyak lagi. Cara kerja jaringan iklan ini umumnya sama dengan Google Adsense, yaitu melalui tayangan per seribu dan jumlah klik pengunjung. Semakin banyak klik yang didapat dari pembaca, semakin besar juga pendapatan yang diperoleh.
Saat ini sudah banyak blogger yang sukses dan menjadikan blogger sebagai pekerjaan utama dengan prospek yang menjanjikan dalam era teknologi yang semakin berkembang. Hal ini wajar terjadi karena blog mereka memiliki trafik ribuan bahkan puluhan ribu setiap hari, sehingga jumlah klik yang didapat juga lebih tinggi dibandingkan blogger pemula yang baru terjun dalam dunia blogger.
Setiap blogger pemula pastinya menginginkan blog mereka mendapatkan jumlah klik yang tinggi. Namun, kenyataannya tidak selalu sesuai harapan karena banyak pembaca yang enggan melakukan klik iklan sebagai tanda terima kasih atau sejenisnya. Oleh karena itu, beberapa blogger mencari alternatif untuk meningkatkan jumlah klik, seperti membuat iklan melayang atau floating ads responsive pada blog mereka.
Baca Juga : Cara Pasang Iklan Parallax di Blog Responsive
Perlu diingat bahwa menggunakan floating ads atau iklan melayang tidak menjamin peningkatan jumlah klik Google Adsense. Namun, metode ini terbukti efektif dalam menambah jumlah klik meskipun tidak sebanyak yang diharapkan. Meskipun begitu, hal ini lebih baik daripada tidak mendapatkan klik sama sekali.
3 Cara Ampuh Membuat Iklan Melayang di Blog Responsive
Berikut adalah tutorial bagaimana membuat iklan melayang yang responsif di blog. Meskipun sudah banyak tutorial yang tersedia secara online, banyak dari mereka yang tidak cocok dengan template yang Anda gunakan. Oleh karena itu, saya akan berbagi sebuah script iklan melayang yang sudah dimodifikasi dengan CSS. Selain itu, saya juga menyediakan beberapa pilihan iklan melayang untuk Anda gunakan.
Lihat Juga : Cara Membuat Iklan Tautan 5 Susun Adsense
- Silahkan buka akun Blogger kamu.
- Selanjutnya silahkan masuk ke menu “Tema” dan pilih “Edit HTML”.
- Kemudian silahkan cari kode </body>.
- Lalu silahkan letakkan kode script floating Ads yang akan saya berikan di bawah ini, tepat di atas kode tersebut.
- Simpan Tema.
- Setelah itu Anda sudah bisa melihat hasilnya.
1. Floating Ads ala Median UI by Sahrilku
<style>.sticky-ad{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;position:fixed;text-align:center;bottom:-104px;left:0;width:100%;z-index:999;max-height:104px;background-image:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;transition:all .4s ease-in-out}.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:13px 13px;background-position:9px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:12px 0 0 0;cursor:pointer}.sticky-ad-close-button:before{position:absolute;content:"";top:-20px;right:0;left:-20px;bottom:0}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}:active,:focus{outline:0}</style><div class="sticky-ad" id="sticky-ad"><!-- Floating Ads Start-->PASTE DISINI SCRIPT GOOGLE ADSENSE<!-- Floating Ads End--><button aria-label="Close this ad" class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none';"></button></div><script>window.addEventListener("scroll",function(){var t=document.getElementById("sticky-ad");window.pageYOffset>300&&(t.style.bottom="0")},!1);</script>
2. Floating Ads ala Arlina Code by Sahrilku
<script type='text/javascript'>$(document).ready(function() {$('img#closed').click(function(){$('#bl_banner').hide(90);});});</script><div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;left:0;z-index:999;-webkit-transform:translateZ(0);'><div><a id='close-fixedban' onclick='document.getElementById('fixedban').style.display = 'none';' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIAyewb6tbVQplCVw-Tg2vkK6F5wnfVNy-SJq4MIM5BtgX7NiK9EVbgq2S8_tYGEsBcxOFHbacjvjkI08yrt03weWtK7sR1FOUMv3jwhm36_CYBOhTJjPRWJuYftevebfnyF_VZ_9YCfyU/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'><!-- Floating Ads Start -->PASTE SCRIPT IKLAN DISINI<!-- Floating Ads End--></div></div>
3. Floating Ads ala Zuamsyah by Sahrilku
<script>window.onload = function(){ document.getElementById('closefloat').onclick = function(){ this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode); return false; }; };</script><div class="fb-btn-zuamsyah"><div class="fb-btn-zuamsyah2"><!-- Floating Ads Start-->PASTE DISINI SCRIPT GOOGLE ADSENSE<!-- Floating Ads End --></div><span id="closefloat"><svg style="height:14px;width:14px" viewbox="0 0 24 24"><path d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" fill="white"></path></svg></span></div><style>#closefloat{cursor:pointer;font-size:5px;position:absolute;right:0;top:40%;background:rgba(1,0,1,.4);padding:2px 2px 0 2px;border-radius:50% 0 0 50%;z-index:8}.fb-btn-zuamsyah{border-radius:5px;background:rgba(1,0,1,.4);position:fixed;bottom:0;left:0;z-index:9;box-shadow:0 1px 4px rgb(0 0 0 / 20%);display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;border-radius:2px;width:100%;max-width:720px;max-height:100px}.fb-btn-zuamsyah2{-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;position:relative}.fb-btn-zuamsyah a:link,.fb-btn-zuamsyah a:visited{color:#fff}.fb-btn-zuamsyah a:hover{color:#fff}.post-body h2{display:block;padding:5px 22px;background:#636363;color:#fff;font-size:1.45rem;border-radius:4px;box-shadow:grey 0 2px 5px}</style>
Keuntungan Menggunakan Floating Ads
- Meningkatkan CPC,CTR.
- Meningkatkan Penghasilan Google Adsense.
- Tampilan Responsive.
- Memiliki Tombol Close.
- Tidak Mengganggu Pembaca.
Penutup
Berikut ini adalah ulasan tentang cara membuat iklan melayang yang dapat saya bagikan. Semoga dengan adanya artikel ini, dapat membantu Anda meningkatkan jumlah klik Google Adsense dan menjadi lebih cepat gajian. Baiklah, iklan melayang yang sudah disediakan pastinya sudah berfungsi dengan baik dan aman digunakan, karena memiliki tombol close sehingga tidak memaksa pembaca untuk melakukan klik. Selamat mencoba!