Cara pasang iklan tetap bar bawah adsense pada blogger dan web lain
Hai sob, jumpa lagi diblog aku ini. Kali ini aku mau bagiin tips memasang iklan tetap yang menempel pada layar bawah pengguna smartphone kita menyebutnya iklan sticky karena iklan ini tidak bergerak mengikuti element yang kita scroll.
Mirip sepert yang digunakan oleh bebedapa situs berita populer. Sebenarnya adsense sudah mempunyai iklan otomatis seperti ini namanya iklan achor. Tapi iklan jenis ini kadang tidak menyenangkan karena munculnya bisa diatas halaman dan kadang dibawah halaman.
Nah buat kalian yang tertarik memasang kode ini cukup menggunakan kode berikut ini. By the way kode ini aku gak tahu author siapa sebab sudah banyak digunakan dan dishare oleh sahabat blogger. Ok baiklan kita lanjut saja ke cara pemasanganya, gak perlu basa-basi lagi:
1. Masuk tema editor atau anda mendownload template terlebih dahulu agar lebih mudah mengeditnya via HP.
2. Silakan cari kode </head> agar lebih mudah gunakan form pencarian cepat. Kalau Di HP pake aplikasi X-Plore dan gunakan fitur pengeditan teks lalu klik ikon kaca pembesar dan ketikan .
3. Kalau sudah ketemu langkah selanjutnya copy kode css dibawah ini, dan paste diatas nya (diatas kode </head>).
4. Selanjutnya silakan cari lagi kode </body> pada tempalte anda kalau sudah ketemu, pastekan script HTML dan JavaScriptnya ini diatas nya. :
Keterangan: Kegunaan dari tag adalah menjalankan kode hanya pada halaman postingan versi mobile. Jika anda ingin menampilkan iklan pada semua halaman tanpa terkecuali hapus semua kode tag nya.
Kegunaan dari koe CDATA adalah untuk menghilangkan parsing xml otomatis pada saat pengeditan file di template blogger. Anda bisa menghilangkanya jika perlu.
contoh langkah-langkahnya dibawah ini:
1. Salin kode css nya dan tempel diatas kode pada htmlmu.
2. Baru kemudian salin kode javascript nya dan paste diatas kode
Mirip sepert yang digunakan oleh bebedapa situs berita populer. Sebenarnya adsense sudah mempunyai iklan otomatis seperti ini namanya iklan achor. Tapi iklan jenis ini kadang tidak menyenangkan karena munculnya bisa diatas halaman dan kadang dibawah halaman.
Nah buat kalian yang tertarik memasang kode ini cukup menggunakan kode berikut ini. By the way kode ini aku gak tahu author siapa sebab sudah banyak digunakan dan dishare oleh sahabat blogger. Ok baiklan kita lanjut saja ke cara pemasanganya, gak perlu basa-basi lagi:
Pemasangan Pada Blogger
Kalai diblogger kita memasangnya pada tempate, anda harus bisa mengedit template halaman blog. Adapun tahapanya seperti ini.1. Masuk tema editor atau anda mendownload template terlebih dahulu agar lebih mudah mengeditnya via HP.
2. Silakan cari kode </head> agar lebih mudah gunakan form pencarian cepat. Kalau Di HP pake aplikasi X-Plore dan gunakan fitur pengeditan teks lalu klik ikon kaca pembesar dan ketikan .
3. Kalau sudah ketemu langkah selanjutnya copy kode css dibawah ini, dan paste diatas nya (diatas kode </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>
4. Selanjutnya silakan cari lagi kode </body> pada tempalte anda kalau sudah ketemu, pastekan script HTML dan JavaScriptnya ini diatas nya. :
<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 aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById('sticky-ad').style.display='none';'/>
</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>
Keterangan: Kegunaan dari tag
Kegunaan dari koe CDATA adalah untuk menghilangkan parsing xml otomatis pada saat pengeditan file di template blogger. Anda bisa menghilangkanya jika perlu.
Pemasangan Pada Web Lain
Jika ingin memasang kode diatas pada halaman web caranya hampir sama seperti diatas hanya saja kita hanya mengambil scriptnya tanpa kode tag1. Salin kode css nya dan tempel diatas kode pada htmlmu.
<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, 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>
2. Baru kemudian salin kode javascript nya dan paste diatas kode
Sepi cuy kaga ada orang lihat
ReplyDeleteHmmm
Delete