join grup whatsapp Join

cara membuat iklan anchor muncul di bawah layar

cara membuat iklan anchor muncul di bawah layar responsive, jenis iklan ini juga biasa di sebut dengan iklan floating, iklan melayang, iklan sticky,
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

Baca juga :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

12 komentar

  1. absen mas, akhirnya ada tutor baru lagi buat iklan anchor muncul di desktop.
    mau tanya juga nih mas. kalo tampilan di hp itu iklan anchor nya bisa di kurangi gak tinggi nya, aku coba utak atik ngurangin tinggi nya gak nemu yg mana

    tapi buat tampilan di pc tetap.
    terima kasih mas sebelum nya
    1. bisa tambahkan css ini ya kak, height:50px nya di sesuaikan saja
      @media screen and (max-width:480px){.stickAd, .stickAdcontent ins{height:50px!important}}
  2. Makasih mas ukuran jadi separo nya pakai 50px, tapi ukuran iklan nya gak ngikut 50px ya mas. Jadi kelihatan kepotong
  3. https://ibb.co/SNVWxms

    Tes gambar
    https://ibb.co/SNVWxms

    1. bukan terpotong kk, ,mungkin iklannya hanya segitu, karena saya sudah menggunakan css ins harusnya iklan nya juga sudah menyesuaikan. bisa lihat punya saya di bawah ini
      https://1.bp.blogspot.com/-es2PJcp1M-A/YBY_Nyfh_QI/AAAAAAAACdM/FOOwXLtkW2csUfxrk-0Cbo6dPLTlnGisQCNcBGAsYHQ/s320/Screenshot_2021-01-31-12-22-04-82.png
    2. Oh iya jika mau kirim gambar di komentar harus salin url gambar yang format .jpg / .png agar bisa tampil
  4. https://i.ibb.co/0hL8HZq/Screenshot-20210131-122435-picsay.png

    ini mas kayaknya ukuran iklan nya separoh doang hehe. padahal responsive ya mas
    1. itu screnshot punya mas 50px ya tinggi nya?
    2. Iya kak 50px, coba aja nnti lihat lagi pas iklan berbeda
  5. iklan nya gak tampil mas di saya, ada solusi gak?
    1. ca-pub-8802465226xxxxxx dan 8252xxxxxx jangan lupa di ubah mas, kalau masih gk muncul pastikan artikel sudah keindex , karna kalau artikel baru yang belum ke index itu iklan gk muncul / blank
    2. kalau masalah kode iklan nya sudah terpasang sempurna mas, iya mungkin perlu waktu buat iklannya tampil :/


image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english