Cara Buat Notifikasi Adblockers Adsense

Cara Buat Notifikasi Adblockers Adsense
Notifikasi Adblockers Versi Komi Ajaib

XDTPD Blogs | 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.

#Langkah-Langkah Menambah Notifikasi Adblockers Adsense
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)}}

 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>

 Selanjutnya, tambahkan Javascript dibawah ini sebelum kode </body>

<script type='text/javascript'>//<![CDATA[// Notifikasi Adblocker Adsensefunction 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>

 Kemudian, tambahkan kode HTML dibawah ini bebas diantara kode<body> dan </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='http://www.xdtpd.net/2017/05/jasa-pembuatan-blog-full-optimasi.html' 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>

Kemudian edit URL ataupun link yang ada pada kode HTML tersebut dengan alamat URL milik blog sobat dan save templatenya. Nah, itulah langkah-langkah menambahkan notifikasi adblockers ala versi ajaib. Semoga bermanfaat dan berguna bagi semuanya. Dan jangan lupa untuk berkunjung dilain waktu karena blog ini akan slelau update berbagai artikel menarik lainnya.


Comments

Post a Comment

Popular posts from this blog

240 Model Gelang Emas Terbaru Yang Paling Populer

Image
Model Gelang Emas Terbaru Yang Paling Populer – Gelang emas sudah menjadi salah satu aksesoris yang dapat menambah kecantikan penampilan seseorang. Selain sebagai aksesoris, gelang emas juga bisa menjadi sebuah investasi jangka panjang dimana harganya yang selalu mengalami kenaikan. Ada berbagai model gelang emas terbaru saat ini. Model gelang emas juga selalu mengikuti trend dan gaya masa ini. Mulai dari gelang emas keroncong, gelang emas murni, gelang emas putih, gelang emas 24 karat dan lainnya. Gelang emas biasanya akan di percantik dengan menambahkan mutiara maupun berlian yang akan menambah kesan mewah pada gelang tersebut. Gelang emas juga terbagi menjadi beberapa tipe, ada yang gelang emas rantai atau solid, ada juga gelang emas kuning maupun emas putih. Nah, semakin beragam jenis gelang emas, maka tentu saja dapat memenuhi model emas trend masa kini dan selera pada kaum wanita. Gelang emas wanita biasanya didesain sesuai usia, ada gelang emas untuk wanita dewasa maupun gelang...
Read more

Ijonkz Premium Responsive Blogger Template

Image
Ijonkz template XDTPD Blogs | Hallo sahabat blogger, pada kesempatan kali ini saya mau share sebuah template blogger yaitu Ijonkz Template yang dijual di Theme Forest. Template ini sebenarnya template premium yang saya dapatkan dari salah satu teman blogging. Dia membeli template ini langsung dari Themeforest jadi intinya ini template asli bukan bajakan yang di upload oleh orang lain diblog mereka. Nah, apasaja sih kelebihan dari template ini ? Untuk kelebihannya sih saya rasa cukup banyak, dilihat dari segi premiumnya saja pasti template ini sudah memiliki berbagai kelebihannya sendiri. Template ini sangat SEO Freindly dan juga fast loding, walaupun dipasang beberapa widget magezinenya namun kecepatan loading template ini juga tidak berkurang. #Fitur-Fitur Ijonkz Template For Blogger Nah, bagi yang sudah penasaran dengan apa saja sih fitur-fitur yang terdapat pada template ini silahkan lihat sendiri dibawah ini. Super Admin Panel Responsive Recent Post Perlabel Magazine Widget Fast ...
Read more

30 Model Perhiasan Emas Paling Baru Yang Lagi Trends

Image
Saat ini, Peminat Perhiasan Emas semakin hari semakin meningkat. Apalagi model perhiasan emas selain bisa dijadikan sebagai hiasan perhiasan emas juga bisa dijadikan suatu investasi paling aman yang semakin hari harga jual emas tersebut semakin meningkat. Secara umum, peminat perhiasan emas paling banyak adalah para wanita dewasa dan kaum ibu-ibu. Model perhiasan emas yang mereka suka juga sangat beragam, ada yang menyukain model gelang emas, model cincin tunang, model kalung emas, liontin emas, bahkan sampai berlian dengan butiran permata. Nah, jika anda adalah salah satu dari sekian banyak peminat perhiasan emas, maka dibawah ini saya telah menyediakan beberapa contoh perhiasan emas yang paling baru dan model emas yang lagi trend di tahun ini. Model Perhiasan Emas Terbaru Tahun Ini Berbicara perhiasan emas, pastinya ada berbagai bentuk perhiasan emas tersebut. Namun, dibawah ini beberapa perhiasan emas yang sangat umun dicari dengan design sangat bagus ataupun bisa kita sebut sebaga...
Read more