Cara Membuat Notifikasi Ad Blocker Edisi Hari Kemerdekaan

Cara Membuat Notifikasi Ad Blocker Edisi Hari Kemerdekaan

Cara Membuat Notifikasi Ad Blocker Edisi Hari Kemerdekaan

Notifikasi Ad blocker ini sebenarnya dibuat oleh mas Adhy Suryadi (kompiajaib), namun kali ini saya bagikan kembali di blog antoncabon dalam tampilan edisi Hari Kemerdekaan, lah apa hubungannya Ad blocker dengan hari kemerdekaan bro?, ya ga ada hubungan sih hehehe.
Terus gimana dengan judul di atas? nah Karena 17 Agustus adalah hari Kemerdekaan Republik Indonesia, maka apa salahnya sebagai blogger mari kita terus kobarkan jiwa Patriotisme sebagai anak bangsa negeri ini.
Kalo pemeikiran saya, banyak cara yang bisa kita lakukan untuk tetap mengobarkan jiwa patriotisme tersebut (googling ajalah kalo masalah ini ya hahahaha).
Kita bahas cara memasangnya ajalah, yuk disimak baik-baik dan tunjukan kalau kita adalah blogger yang cinta Indonesia, maka gunakanlah produk-produk Indonesia wkwkwkwkwk.
Cara Membuat Notifikasi Ad Blocker Edisi Hari Kemerdekaan

Cara Memasang Notifikasi Ad Blocker :

  1. Terlebih dahulu anda harus Cinta Tanah Air Indonesia (Wajib !). 
  2. Kemudian setelah itu berdoalah buat bangsa ini!, 
  3. Langkah selanjutnya adalah masuk ke dashboard Blogger milik anda.
  4. Masukan kode berikut ini.

Blogger > Template > Klik Edit HTML > Tambahkan CSS berikut sebelum kode ]]></b:skin> atau </style>


CSS nya:

#keep-ads{background:rgba(0,0,0,.65);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-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)}}
#keep-ads p{margin:0}
#keep-ads a{color:#0bce00;}#keep-ads a:hover{color:#fb6a00;text-decoration:none}
#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;}
.keep-adsme{background:#ffffff;color:#666;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:#fb0c0c;color:#fff;padding:15px 25px;font-size:2.2rem;margin:0 auto;text-shadow:0 1px 0 #c7c8ca,0 2px 0 #b1b3b6,0 3px 0 #9d9fa2,0 4px 0 #8a8c8e,0 5px 0 #77787b,0 6px 0 #636466,0 7px 0 #4d4d4f,0 8px 7px #001135;}
.keep-me{border-top:1px solid rgba(255,255,255,0.1);padding:10px 30px 50px 30px}
.salam {text-align:left;padding:5px;margin:auto;font-family:Pacifico,serif;color:#666}
.close-keep-ads{position:absolute;top:0;left:0;color:#fff;font-size:24px;font-weight:700;cursor:pointer;width:24px;height:24px;line-height:24px;text-align:center}

Cara Membuat Notifikasi Ad Blocker Edisi Hari Kemerdekaan
Notifikasi Ad Blocker Edisi Hari Kemerdekaan

Javascript di bawah ini Tambahkan sebelum kode </body>



<script type='text/javascript'>

//<![CDATA[
// Notifikasi Adblocker
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>

Letakan kode HTML dibawah ini, posisinya atur aja yang penting ga keluar dari <body>


<div id='keep-ads'>

<div class='keep-adsme'>
<p><h4>Merdeka Bung ! <i aria-hidden='true' class='fa fa-hand-peace-o'></i></h4></p>
<div class='keep-me'>
<!--<p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>-->
<p>Nobody likes ADS, but Antoncabon is paid for using GOOGLE ADSENSE on www.antoncabon.us. If you like our free articles, please consider to disable your ad blocker..</p>
<p>This is <a href='https://www.antoncabon.us/p/how-to-whitelisting.html' target='_blank' title='Show me how'>how to whitelisting</a> this blog in your ad blocker</p>
<p>Thank you very much</p>
</div>
<div class='close-keep-ads' onclick='hidekeep()'>&#215;</div>
<div class='salam'>
<p>Regards,</p>
<p>"Antoncabon"</p></div>
</div>
</div>

Simpan Template

Demikianlah Tutorial mengenai Cara Membuat Notifikasi Ad Blocker Ala Hari Kemerdekaan, semoga ada manfaatnya ya, dan saya sangat senang jika sobat dapat berkomentar atau memberi masukan mengenai tutorial diatas.
Jika ada sobat Blogger yang ingin berdiskusi seputar Postingan ini atau Postingan tentang Dunia Kebun Sawit, silahkan tinggalkan komentar sobat di kolom komentar blog ini. saya akan sangat senang meresponnya, terimakasih salam Antoncabon.
"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!


Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

4 Comments Add Comment

Saya hanya bisa bilang, merdeka bung. Belum berani pasang, maklum blog saya sudah tergolong berat banget. Merdeka !

Balas

sip boleh dicoba nih mas, saya liat tampilannya juga keren

Balas

Sippp, silahkan mas... :-d

Balas
Add Comment

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Adblock Detected

Like this free Articles?

Please Don't Run your ad blocker on this Website, then reload it.

Donate to this website.

Thank you

×
×