Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

Cara Membuat Notifikasi AdBlock Seperti Arlina Design Responsive

Cara Membuat Notifikasi AdBlock Seperti Arlina Design Responsive
Cara Membuat Notifikasi AdBlock Seperti Arlina Design Responsive
Selamat datang di IMAMKUNBLOG - Hello sobat semuanya pada kali kesempatan ini saya berbagi lagi mengenai tutorial blogger "Cara Memasang Script Anti AdBlock di blogger". Tutorial kali ini saya dapatkan dari Blognya mba Arlina Design yang sudah di editnya.


Sebelum kita memasuki pada langkah pemasangannya saya akan menjelaskan terlebih dahulu Apa itu AdBlock? 

Adblock adalah ektensi penyaring konten dan pemblokiran iklan sumber terbuka untuk penjelajahan web. Adblock sangat memungkinkan pengguna mencegah munculnya iklan yang mengganggu.

Adblock merupakan ektensi yang sangat populer digunakan di Google Chrome dari dulu hingga saat ini dan sudah tercatat ada sekitar 20 Juta lebih pengguna. Adblock dibuat pada tanggal 8 Desember 2009 lalu. 

Baiklah kita langsung masuk saja ke tahap pemasnagan anti Adblocknya. Untuk langkah pemasangan tidaklah ribet ataupun susah, sobat dapat mengikuti langkah-langkah dibawah ini dengan teliti agar tidak ada permasalahan saat pemasangan nantinya.

Cara Memasang Notifikasi Adblock Ala Arlina Design

1. Pertama, login dahulu ke Blogger.com
2. Kemudian, pilih Template/Theme > Edit HTML
3. Copy dan pastekan kode dibawah ini tepat diatas 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)}}
  
4. Selanjutnya tambahkan kode Java Script tepay diatas kode </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>
5. Langkah terakhir adalah menambahkan kode HTML teoat diatas kode </body>
<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.imamkunblog.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>

Note: Silahkan ganti tulisan yang berwarna merah dengan URL blog anda.

6. Simpan Template!!

Demikianlarh artikel Tutorial Blogger kali ini Cara Membuat Anti Adblock Seperti Arlina Design di Blogger. Semoga artikel kali ini bermanfaat buat anda dengan memasang Anti Adblock maka bisa membuat blog kamu lebih aman dan penghasilan blog kamu tidak berkurang.
Show comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×