Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Beranda / Blogging

Cara Membuat Floating Ads atau Iklan Melayang di Blog

Posting Komentar

Cara Membuat Floating Ads atau Iklan Melayang di Blog - Menjadi publisher Google Adsense bagi seorang blogger tentunya sangat berharap agar dapat bisa menampilkan iklan di situsnya dan mendapatkan uang dari iklan tersebut.

Bahkan banyak sekali dari mereka yang selalu rutin melakukan update artikel setiap harinya agar mendapatkan trafik dan klik dari para pengunjung dan menghasilkan uang dari Google Adsense.

Dengan memiliki banyak trafik organik maka akan meraup keuntungan dalam menghasilkan uang karena banyaknya jumlah klik iklan dari para pengunjung. Namun, untuk Cara membuat blog ramai pengunjung itu tidak mudah seperti yang anda bayangkan.

Untuk menghasilkan uang seorang blogger tak harus memiliki Google Adsense saja, Ada banyak sekali jaringan periklan selain Google Adsense seperti MGID, A-Ads, Optad360 dan masih banyak lagi yang lainnya selain yang di sebutkan di atas.

Pada umumnya jaringan periklan tersebut memiliki cara kerja yang tidak jauh dari Google Adsense, Semakin banyak jumlah klik dari para pengunjung semakin banyak pula penghasilan yang bisa Anda dapatkan. Semua tergantung dari para pembaca dan jumlah klik dari para pengunjung blog anda.

Sekarang sudah tidak heran lagi banyak sekali para bloggers sukses dan menjadikan blogger sebagai pekerjaan utama yang sangat menjanjikan seperti cerita mas Eka Lesmana seorang tukang angon bebek menjadi Bloggers yang penghasilannya ratusan juta.

Hal itu memang sangatlah wajar karena blog mereka memiliki jumlah pengunjung ribuan bahkan puluhan ribu perharinya dan jumlah kliknya pun pasti lebih tinggi dibandingkan seorang blogger pemula yang baru saja terjun di dunia Bloggers.

Namun, setiap Bloggers sangat berharap sekali blog yang mereka kelola mendapatkan trafik pengunjung yang banyak dan jumlah klik iklan tinggi.

Tetapi, hal tersebut tidak sesuai dengan apa yang di bayangkan.  Banyak dari mereka yang mencari cara lain untuk meningkatkan jumlah klik iklan yakni dengan cara membuat iklan melayang di blog atau membuat floating ads responsive di blogger.


Bahwasanya dengan anda menggunakan floating ads ini tidak menjamin 100% akan meningkatkan jumlah klik iklan Google Adsense Anda. Tetapi cara ini banyak digunakan para bloggers karena tergolong sangat ampuh dalam mencari jumlah klik meskipun tidak begitu banyak dari pada tidak mendapatkan klik sama sekali.


3 Cara Membuat Iklan Melayang di Blog

Sebenarnya Tutorial ini sudah banyak sekali yang membuatnya. Namun, kebanyakan kurang responsive atau tidak sesuai dengan template yang Anda gunakan. Berikut ini saya akan membagikan sebuah tutorial mengenai cara membuat iklan melayang di blog agar responsif yang telah ditambahkan beberapa sentuhan CSS. Tak hanya itu saja, saya juga beberapa macam floating ads yang bisa Anda coba.

  1. Pertama buka akun Blogger yang Anda miliki.
  2. Selanjutnya silahkan masuk ke menu “Tema” dan pilih “Edit HTML”.K
  3. emudian silahkan cari kode </body>.
  4. Lalu silahkan letakkan kode script floating Ads yang akan saya berikan di bawah ini tepat di atas kode tersebut.
  5. Simpan Tema.
  6. Setelah itu Anda sudah bisa melihat hasilnya.

1. Floating Ads ala Median UI


<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 by Zuamsyah


<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>

3. Floating Ads by Arlina Coding


<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;left: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/AVvXsEjkc03FM4vw6_6sJV5q8avRRVQ4Zd4juBOJzUjp0MJpBQ5vllqGBR0zI_SkotvUEnEdIn-fk01Skucuyc8kC3wuLtJ_YZBmyYMH98bVdC__tdLmC6gGjwmjYy-xfgqNxtjaBipqFF9lgz9j/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>

Nah itulah beberapa floating ads yang bisa saya sampaikan, selamat mencoba semoga bermanfaat.

Posting Komentar untuk "Cara Membuat Floating Ads atau Iklan Melayang di Blog"