VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Memasang Notifikasi AdBlocker Ala Kompi Ajaib dan Arlina Design

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.
0

Posting Komentar