Cara Membuat Iklan Melayang (Sticky) Di Mobile Site Blog Di Blogger

BangSiagian.id - Iklan melayang (floating) adalah jenis ad unit iklan yang posisinya berada di luar halaman atau tidak melekat pada tubuh blog. Iklan yang melekat tubuh di tubuh disebut ad unit in-page (di halaman). Salah satu jenis ad unit iklan melayang adalah ad unit interstitial.

Pada kesempatan ini saya akan memberikan tips cara membuat iklan melayang (sitcky) di mobile site blog di blogger. Iklan melayang yang bagikan ini hanya tampil di mobile dengan ukuran 320x50 dan posisi iklan melayang ini berada di footer mobile site blog. Iklan ini dilengkapi dengan tombol close yaitu tanda "X" sehingga iklan dapat di tutup atau tadi close dan tidak mengganggu penggunjung blog.

Iklan melayang di footer ini tidak akan langsung tampil saat pengunjung berada di blog kita, iklan ini akan tampil jika pengunjung blog kita mengkursor blog kita ke bawah.

Bagaimana cara membuatnya?. Silahkan kamu ikuti langkah-langkahnya dibawah ini.


Cara Membuat Iklan Melayang Di Mobile Site Blog Di Blogger


1. Login terlebih dahulu ke Blogger.com

2. Klik TEMA >> lalu EDIT HTML

3. Cari kode </head> atau kode ini &lt;!--</head>--&gt;&lt;/head&gt;

4. Letakkan kode dibawah ini tepat diatas kode ini </head> atau kode ini &lt;!--</head>--&gt;&lt;/head&gt;

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<style>
/*<![CDATA[*/
.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, 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, 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>
</b:if>


Baca Juga: Cara Membuat iklan Melayang Di Samping Kiri Dan Kanan Blog Di Blogger


5. Selanjutnya cari kode ini </body> atau kode ini &lt;!--</body>--&gt;&lt;/body&gt;

6. Letakkan kode dibawah ini tepat diatas kode </body> atau kode ini &lt;!--</body>--&gt;&lt;/body&gt;

<b:if data:blog.isMobileRequest == &quot;true&quot;'>
<div class="sticky-ad" id="sticky-ad">

<!-- Kode iklan letakkan di sini -->

<button class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none';" aria-label="Close this ad"></button>
</div>

<script>
//<![CDATA[
window.addEventListener("scroll",function(){
  var target = document.getElementById('sticky-ad');
  if(window.pageYOffset > 300){
   target.style.bottom = "0";
  }
},false);
//]]>
</script>
</b:if>

7. Simpan Tema

8. Lalu Buka blog dari ponsel dan lihat iklan melayangnya

Pastikan kamu melakukannya dengan benar dan jangan terburu-buru, agar cara membuat iklan melayang (sitcky) di mobile site blog di blogger berhasil.

Jika kamu merasa artikel ini bermanfaat, jangan lupa share artikel ini ke akun sosial media kamu, agar teman-teman blogger yang lian tahu artikel cara membuat iklan melayang (sitcky) di mobile site blog di blogger

Sekian artikel dari saya guys, semoga artikel ini bermanfaat dan selamat mencoba.

Referensi kode: https://www.kompiajaib.com/2018/03/membuat-iklan-sticky-pada-template-non.html

Iklan Atas Artikel

Iklan Tengah Artikel 1



Iklan Tengah Artikel 2

Iklan Bawah Artikel