-->

Memasang Notifikasi AdBlocker Ala Kompi Ajaib dan Arlina Design

Daftar Isi [Tampilkan]
Serieswans.com - Pada Kesempatan kali ini saya ingin berbagai cara memasang notifikasi adblockers adsense pada blog kita. Notifikasi ini sangat bermanfaat untuk mencegah orang yang memakai ektensi adblock di browser mereka saat mengunjungi blog kita. Cara ini saya dapatin dari Blog Kompi Ajaib dan Arlina Design. Dalam tutorial ini saya memabagikan script notifikasi yang telah di modif oleh mbak arlina yang bisa diclose saat notifikasi tersebut tampil.

Baca Juga : 5 Tips dan Cara Mudah Mendapatkan Sitelink Blog dari Google Terbaru

Memasang Notifikasi AdBlocker Ala Kompi Ajaib dan Arlina Design
Notifikasi AdBlocker Ala Kompi Ajaib dan Arlina Design

Berikut Adalah Langkah-Langkah Menambah Notifikasi Adblockers Adsense :


1. Pertama, silahkan sobat masuk kedashboard blogger seperti biasanya, kemudian klik pada menu Theme > Edit HTML dan tambahkan CSS dibawah sebelum kode ]]></b:skin> atau </style>

/* Notifikasi Adblocker Adsense */ 
#keep-ads{padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all 
.6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all 
.2s ease-in-out,visibility 0s;transform-origin:bottom center;} 
.keep-adsme{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0;margin:auto;top:30%;left:0;right:0;font-size:1.2rem;line-height:1.5;max-width:930px;box-shadow:0 0 50px rgba(0,0,0,0.25);transition:all 
.6s cubic-bezier(.25,.8,.25,1);overflow:hidden} 
.keep-adsme:hover{box-shadow:0 0 20px rgba(0,0,0,0.15);} 
.keep-adsme h4{background:#d04537;color:#fff;padding:15px 25px;font-size:2.2rem;margin:0 auto;border-bottom:1px solid rgba(0,0,0,0.1);} 
.keep-me{border-top:1px solid rgba(255,255,255,0.1);padding:10px 30px 50px 30px} 
#keep-ads p{margin:0} 
#keep-ads a{color:#ffe88b;}
#keep-ads a:hover{color:#ffe88b;text-decoration:underline} 
#keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble 
.7s;opacity:1;} 
.close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:32px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all 
.6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);} 
.close-keep-ads:hover{color:#fff;transform:scale(1.0);} 
.keep-adsme:hover 
.close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);} 
#keep-ads p span {font-family:fontawesome;font-size:5rem;} 
@keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}

2. Tambahkan juga CSS berikut untuk tampilan Smartphone ataupun versi Seluler

<b:if cond='data:blog.isMobileRequest == "true"'> <style type='text/css'> .keep-adsme{top:0;padding:15px;border:0;font-size:1.1rem;opacity:.99;bottom:0;font-family:arial;} .keep-adsme h4{background:transparent;font-size:1.5rem;margin:40px auto 0 auto;} .close-keep-ads{text-align:center;visibility:visible;opacity:1;color:#fff;bottom:20px;right:20px;padding:0;font-size:32px;width:38px;height:38px;line-height:32px;border-radius:100%;border:2px solid #fff;transform:translate(0,0);} .close-keep-ads:hover,.keep-adsme:hover .close-keep-ads{background:#fff;color:#e74c3c;} </style> </b:if>

3. Selanjutnya, tambahkan Javascript dibawah ini sebelum kode tag </body>

<script type='text/javascript'> //<![CDATA[ // Notifikasi Adblocker Adsense function hidekeep(){document.getElementById("keep-ads").style.display="none"}setTimeout(function(){var e=document.getElementById("keep-ads"),t=document.querySelectorAll("ins.adsbygoogle");0===$(t).height()&&(e.className="show")},2e3); //]]> </script>

4. Kemudian, tambahkan kode HTML dibawah ini bebas diantara kode setelah tag <body> dan sebelum tag </body>

Baca Juga : Cara Mudah Memasang Author Box Keren di bawah Postingan Blog

<div id='keep-ads'> <div class='keep-adsme'>   <p><h4>Adblock Detected</h4></p> <div class='keep-me'>   <p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>   <p>Like this blog? Keep us running by whitelisting this blog in your ad blocker</p>   <p>This is <a href='https://www.serieswans.com/' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>   <p>Thank you</p> </div> <div class='close-keep-ads' onclick='hidekeep()'>&#215;</div> </div> </div>

5. Terakhir edit URL ataupun link yang ada pada kode HTML tersebut dengan alamat URL milik blog sobat dan save templatenya.

Nah, itulah Cara Memasang Notifikasi AdBlocker Ala Kompi Ajaib dan Arlina Design. Semoga bermanfaat dan berguna bagi semuanya. Dan jangan lupa untuk berkunjung dilain waktu karena blog ini akan slelau update berbagai artikel menarik lainnya.
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Buka Komentar ( 0 )
    tutup Komentar

    0 Komen

    Posting Komentar

    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!