cara membuat iklan anchor muncul di bawah layar

hallo semua pada kesempatan kali ini saya akan membagikan cara membuat iklan anchor muncul di bawah layar pada mobile maupun pada desktop dan responsive tentunya.

jenis iklan ini juga biasa di sebut dengan iklan floating, iklan melayang, iklan sticky, jenis iklan ini sendiri sebenarnya sudah di sediakan oleh google adsanse dengan cukup mengaktifkan iklan otomatis dan centang iklan anchor

namun iklan otomatis ini memiliki kekurangan yaitu posisi yang tidak menetap, kadang muncul di atas dan kadang di bawah dan lebih sering muncul pada layar atas, sedangkan kebanyakan orang lebih suka jenis iklan ini muncul di layar bawah dengan alasan tidak menutupi header, selain itu juga iklan anchor otomatis ini tidak dapat tampil di desktop hanya mobile saja.

jadi buat kalian yang ingin membuat iklan anchor, iklan floating, iklan melayang, iklan sticky hanya muncul di layar bawah berikut caranya di bawah ini.

Cara Membuat Iklan Anchor Muncul Di Bawah Layar

silakan kalian buat unit iklan dulu dengan memilih iklan display dan ukurannya pilih responsive dan catat kode data-ad-client dan data-ad-slot kalian.

selanjutnya masuk ke blogger pilih tema dan edit html salin dan letakkan css di bawah ini tepat di atas kode ]]></b:skin>

.stickAd{position:fixed;bottom:0;left:0;right:0;width:100%;min-height:70px;max-height:200px;padding:5px 5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50;border-top:1px solid #eceff1}
.stickAdclose{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;border:1px solid #eceff1;border-bottom:0;border-right:0;position:absolute;right:0;top:-30px;background-color:inherit}
.stickAdclose svg{width:18px;height:18px;fill:none!important;stroke:#48525c;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.stickAdcontent{flex-grow:1;overflow:hidden;display:block;position:relative}
.stickAdin:checked ~ .stickAd{padding:0;min-height:0}
.stickAdin:checked ~ .stickAd .stickAdcontent{display:none}
.stickAdin:checked ~ .stickAd .stickAdclose svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
  
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .stickAd,.darkMode .stickAdclose{border-color:rgba(255,255,255,.1)}
.darkMode .stickAd{background-color:#2d2d30}

dan silakan salin kode di bawah ini dan letakkan di atas kode </body> jika kalian tidak menemukannya kemungkinan telah di parse sehingga akan tampak seperti &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:view.isPost'>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<input class='stickAdin hidden' id='stickAdin' type='checkbox'/><div class='stickAd'><label class='stickAdclose' for='stickAdin'><svg viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg></label><div class='stickAdcontent'><ins class='adsbygoogle' data-ad-client='ca-pub-8802465226xxxxxx' data-ad-format='horizontal' data-ad-slot='8252xxxxxx' data-full-width-responsive='false' style='display:block;text-align:center'></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div></div></b:if></b:if>

silakan ubah kode ca-pub dan data-ad-slot milik kalian, iklan ini hanya tampil pada mobile dan di dalam postingan.

jika kalian ingin menampilkan di desktop juga hapus kode <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> dan penutup nya </b:if>

dan jika ingin menampilkan iklan di setiap halaman hapus kode <b:if cond='data:view.isPost'> dan penutup nya </b:if>

jika sudah silakan klik simpan dan lihat hasilnya, sekian cara membuat iklan anchor muncul di bawah layar semoga bermanfaat.

Source code:
www.jagodesain.com