Cara Membuat Notifikasi AdBlock Seperti Arlina Design Responsive
January 19, 2020
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.com2. 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)}}
<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()'>×</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.
0 komentar