Cara Mudah Membuat Iklan Adsense Melayang Dibagian Bawah Pada Blogger (Iklan Sticky Desktop)
www.azid45.web.id - Cara Mudah Membuat Iklan Adsense Melayang Dibagian Bawah Pada Blogger (Iklan Sticky Desktop). Assalamualaikum.Wr.Wb, pada kesempatan kali ini saya akan share kepada teman-teman untuk menampilkan iklan sticky pada desktop yang melayang dibagian footer. Pada dasarnya iklan sticky ini muncul pada versi mobile jika anda mengaktifkan iklan auto ads. Iklan tersebut kadang muncul pada bagian header, dan juga kadang muncul pada bagian footer. Hal ini dikarenakan iklan sticky terebut ditampilkan secara otomatis tidak dengan script manual. Untuk versi desktop sendiri pihak google tidak memberikan tampilan iklan sticky, akan tetapi kita bisa mensiasatinya dengan sebuah kode script dan CSS. Dengan sentuhan kode tersebut iklan adsense bisa menyerupai iklan sticky atau melayang sebagaimana kita lihat pada versi mobile.
Apakah iklan sticky pada versi dekstop melanggar kebijakan?, dan bagaimana cara membuat iklan sticky pada versi desktop?. Dari pertanyaan ini, pihak google telah menentukan kebijakan bahwa selama publisher meletakkan iklan melayang pada blognya kurang dari sepertiga dari layar maka tidak melanggar kebijakan google adsense. Oleh karena itu kita sering lihat ukuran iklan sticky pada versi mobile kurang lebih 320px x 50px sehingga tidak memakan ruang artikel lebih dari sepertiganya. Agar tidak melanggar kebijakan google kita juga bisa menampilkan iklan sticky atau iklan melayang pada versi desktop dengan ukuran 728px x 90px. Lantas bagaimana membuatnya?, untuk pertanyaan yang kedua ini cukuplah mudah membuat iklan tersebut meski pihak google tidak menampilkan layanan tersebut pada versi desktop. Kita bisa mengakalinya dengan kode css, untuk melihat caranya anda bisa mengikuti langkah-langkahnya dibawah ini:
Pertama, login pada blogger terlebih dahulu, setelah itu masuk pada menu template atau thema kemudian pilih edit HTML
Kedua, letakkan kode css berikut tepat diatas kode </head>
<style>
.displayblock{display:block}
.fixedx{width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);}
.cursor{cursor:pointer;}
.vertical{vertical-align:middle;}
.fixedx-1{text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto}
.iklan-sticky-mobile{display:inline-block;width:320px;height:50px}
.iklan-sticky{display:inline-block;width:728px;height:90px}
.close-button-sticky{width:15px;height:10px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='5' height='5' 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:center;background-color:rgba(255,255,255,.7);background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:0;cursor:pointer}
</style>
Ketiga, setelah copas kode css diatas dan meletakkan di atas kode </head> langkah selanjutnya adalah copas kode berikut dan letakkan diatas kode </body>
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='fixedx' id='fixedban'>
<div><a class='cursor' id='close-fixedban' onclick='document.getElementById('fixedban').style.display = 'none';'><center><div class='vertical close-button-sticky'/></center></a></div>
<div class='fixedx-1'>
<ins class='adsbygoogle iklan-sticky' data-ad-client='ca-pub-xxxxx' data-ad-slot='xxxxx'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</b:if>
Keempat, ubahlah data-ad-slot dengan kode slot iklan responsive milik anda serta ubah pula kode ca-pub dengan kode ca-pub milik sobat. Setelah itu sobat bisa Save Template
Untuk lebih jelasnya, anda bisa melihat contoh peletakkan dibawah ini
<HTML .......................>
<head>
.......................
.....................
<style>
.displayblock{display:block}
.fixedx{width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);}
.cursor{cursor:pointer;}
.vertical{vertical-align:middle;}
.fixedx-1{text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto}
.iklan-sticky-mobile{display:inline-block;width:320px;height:50px}
.iklan-sticky{display:inline-block;width:728px;height:90px}
.close-button-sticky{width:15px;height:10px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='5' height='5' 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:center;background-color:rgba(255,255,255,.7);background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:0;cursor:pointer}
</style>
</head>
<body>
.........................
....................
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='fixedx' id='fixedban'>
<div><a class='cursor' id='close-fixedban' onclick='document.getElementById('fixedban').style.display = 'none';'><center><div class='vertical close-button-sticky'/></center></a></div>
<div class='fixedx-1'>
<ins class='adsbygoogle iklan-sticky' data-ad-client='ca-pub-xxxxx' data-ad-slot='xxxxx'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</b:if>
</body>
</HTML>
Demikianlah artikel saya tentang Cara Mudah Membuat Iklan Adsense Melayang Dibagian Bawah Pada Blogger (Iklan Sticky Desktop). Semoga bermanfaat, amin.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.