Tampilan dari Anti Adblock kali ini berbeda dari yang sebelumnya sob, kali ini ada sedikit bounce pada effect dikala keluar pop-up nya.
Atau kalian sanggup lihat sendiri di demo dibawah artikel.
Untuk tutorialnya sangat sederhana dan tidak jauh berbeda dari yang sebelumnya, dan untuk kalian yang sudah memasang adblock ibarat arlina sebelumnya tolong dihapus dulu yah agar tidak ada kegagalan atau error dikala penerapannya.
Oke kita lanjut aja ke cara pasang anti adblock nya gimana :
Buka Blogger > Tema > Menuju halaman Edit HTML, Cari isyarat </head>
Lalu letakan isyarat dibawah ini sempurna diatas isyarat </head>
<style type='text/css'>
/* Animation */
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}
/* Say Hi to Adblock */
#arlinablock{background:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}
#arlinablock .header{margin:0 0 15px 0}
#arlinablock .inner{background:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto;animation:rubberBand 1s}
#arlinablock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}
#arlinablock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}
#arlinablock button.active,#arlinablock button:hover.active{background:#fff;color:#222;outline:none}
#arlinablock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}
#arlinablock .fixblock div{display:none}
#arlinablock .fixblock div.active{display:block}
#arlinablock ol{margin-left:20px}
@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
</style>
Jika sudah, tambahkan lagi isyarat dibawah ini sempurna diatas atau sebelum isyarat </body>
<script type='text/javascript'>
//<![CDATA[
// Say Hi to Adblock
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/quasar/23207858/arlinablock.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Selesai deh, simpan perubahan dan coba lihat hasilnya.
Untuk kalian yang ingin melihat ibarat apa kesannya silahkan ke DEMO
Untuk kalian yang ingin melihat ibarat apa kesannya silahkan ke DEMO
Dan untuk kalian yang sudah memasang JS Adsense ibarat dibawah ini tolong segera dihapus ya, alasannya ialah di script di atas tadi sudah termasuk JS Adsense.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Atau ini
<script type='text/javascript'>
//<![CDATA[
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
//]]>
</script>
Oke sekian dulu artikel Cara Membuat Anti Adblock Pada Blogger Seperti Arlinadzgn Terbaru!, Semoga bermanfaat ya!
0 comments:
Post a Comment