Bacalah

Setelah di approvenya Adsense maka kamu biasanya meletakkan kode Adsense untuk menampilkan iklan bisa manual juga otomatis

Berbicara soal penempatan iklan, ada beberapa orang mengatakan bahwa iklan melayang tetap (sticky fixed ads) yang ditempatkan di paruh bawah layar memiliki nilai rasio klik yang cukup bagus.



Karena secara kinerjanya, pengunjung blog akan terus melihat iklan tersebut meski laman discroll ke bawah atau ke atas sehingga memiliki potensi klik yang lebih besar.

Dalam tutorial Blog kali ini Bacalah.biz akan berbagi trik bagaimana cara membuat iklan adsense melayang di Blogspot kamu yang tetap di bawah layar khusus versi mobile.

Maka iklan ini nantinya hanya akan tampil jika pengunjung mengakses blog menggunakan ponsel atau jika dilihat dari url browser ada embel-embel m?=1 di akhir urlnya.

Ikuti panduan singkat ini.


  • langkah pertama yang perlu dipersiapkan adalah memasang kode css-nya di bawah ini. 
  • Tempatkan kode tepat di atas tag penutup head (/head):



<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<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: 0;
  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>



Jika sudah, sekarang kamu  perlu memasang kode iklannya agar bisa muncul di bawah layar secara tetap.

Iklan ini nanti ada tombol close-nya sehingga pengunjung memiliki pilihan untuk menutup iklan tersebut atau tidak.

Tempatkan kode di bawah ini tepat di atas tag penutup body (/body),
silakan dicopy paste:


<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<div class='sticky-ad' id='sticky-ad'>
<!-- Kode iklan silahkan simpan di bawah ini -->
<!-- 320x50 -->

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


Kode iklan adsense di letakkan di bawah keterangan
<!– Kode iklan di tempatkan di sini –>.

Buatlah unit baru iklan adsense versi mobile dengan ukuran 320×50, agar iklannya terlihat rapi dan tidak menggangu pengunjung.
Kodenya kemudian dipastekan pada posisi yang disediakan.

Silahkan pergunakan seperlunya,

Semoga bermamfaat

Post a Comment

Terima kasih, Anda sudah berkomentar dan berkunjung ... salam

Previous Post Next Post