✔ Cara Pasang Iklan Sticky Di Blogger Dengan Aba-Aba Html
Iklan sticky atau iklan Anchor Adalah iklan pada blog atau website yang melekat dibawah atau diatas artikel dan iklan ini tetap terlihat saat pengunjung menggulir halaman kebawah atau keatas atau sanggup disebut dengan iklan yang melayang.
Sebenarnya iklan Anchor/sticky ini sudah tersedia di pengaturan unit iklan pada adsense, Namun banyak publisher yang mengeluhkan kalau menggunakan iklan anchor bawaan dari Adsense tampilannya sedikit menggaganggu alasannya akan ada ruang kosong saat iklan ini muncul diblog. Maka akan aku bagikan isyarat iklan yang sanggup menampilkan iklan sticky atau anchor tanpa menggunakan iklan otomatis bawaan adsense. kelebihan dari iklan sticky yang aku temui ini mempunyai tampilan yang lebih menarik dan tidak menyebabkan adanya ruang kosong saat iklan anchor ini muncul.
Cara buat Iklan Anchor atau sticky diblogger
1. Masuk ke blogger >> Tema >> Edit HTML >> Salin dan simpan isyarat berikut diatas isyarat <Head>.
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" 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: -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>2. Dan simpan isyarat HTML berikut diatas isyarat <body>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<div class="sticky-ad" id="sticky-ad">
<!-- Kode iklan silahkan simpan di bawah ini -->
<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 sasaran = document.getElementById('sticky-ad');
if(window.pageYOffset > 300){
target.style.bottom = "0";
}
},false);
//]]>
</script>
</b:if>Untuk memudahkan mencari isyarat <head> dan <body> klik ctrl+F di dalam kotak edit html pada tema blog Anda. Ganti Angka 300 untuk menyesuaikan tinggi iklan Sticky atau anchor. letakan isyarat iklan adsense Anda sesuai dengan perintah isyarat html diatas atau pada isyarat aku tebalkan.
Sumber http://www.masigun.com
0 Response to "✔ Cara Pasang Iklan Sticky Di Blogger Dengan Aba-Aba Html"
Posting Komentar