Blogger Tutorial: Adding Pop-Up Ads for Increased Engagement

Boost Your Ad Revenue: Create Pop-Up or Floating Ads on Blogger

Are you struggling to get clicks from your blog visitors? I know I was. Despite my best efforts, I just couldn't seem to get the engagement I needed to earn a decent income from Adsense.

My Struggle with Adsense

I've been trying to monetize my blog with Adsense since 2019, but unfortunately, I haven't received a single payment yet. It's frustrating, especially when you put so much time and effort into creating quality content.

The Game-Changer: Pop-Up Ads

One day, I had an epiphany. What if I created a pop-up ad that would grab my visitors' attention? I gave it a try, and to my surprise, it worked! I started getting more clicks, and my ad revenue began to increase.

Why I'm Sharing This Tutorial

Initially, I didn't plan on sharing this tutorial. However, someone stole the code from my blog's view source, which didn't sit well with me. I don't appreciate people taking my work without permission. So, I've decided to share the code publicly, hoping it will benefit others and reduce the likelihood of theft.

How to Create Pop-Up or Floating Ads on Blogger

Now that you know my story, let's dive into the tutorial. Here's a step-by-step guide on how to create pop-up or floating ads on Blogger:

how to make

1. The first step, please log in to your blogger account
2. then select Layout
3. Create a new gadget by clicking Add gadget.
4. Copy and paste the code below into the gadget you created earlier.

<style>

:root{

  /*pop up color code*/

  --warna-kotak:#fafafc;

  --warna-tombol-close:#cc18ff;

}

</style>

<input class='adz hidden' id='offads-adz' type='checkbox' />

<div class='adsInner'>

<div class='adsBlock' data-text='Ads'>

<div class='credit-1'>widget by alfatechnesia.my.id</div>

 <!--ad code-->

<ins class="adsbygoogle"

     style="display:inline-block;width:290px;height:290px"

     data-ad-client="ca-pub-000000000000000"

     data-ad-slot="000000000000000"></ins>

<script>

     (adsbygoogle = window.adsbygoogle || []).push({});

</script>



<div class='close'>

<label for='offads-adz'>

<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>

<path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path>

</svg>

</label>

</div>

</div>

<label class='adsBg' for='offads-adz'></label>

</div>

5. click save
6. after that select Theme>Edit HTML
7. copy and paste the javascript code below and place it above the code </body> or the code <!--</body>--></body>

  <style>
:root{
  /*pop up color code*/
  --warna-kotak:#fafafc;
  --warna-tombol-close:#3d5afe;
}
</style>
<input class='adz hidden' id='offads-adz' type='checkbox'/>
<div class='adsInner'>
<div class='adsBlock' data-text='Ads'>
<div class='credit-1'>widget by niadzgn.blogspot.com</div>
 <!--ad code-->
<a href='https://www.blogger.com/follow.g?blogID=8109648382048234843'> <img advertisement='NiaDzgn' border='0' height='100%' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR2h90jPJ8HJUltgs7qrk6Nx0_qh7LMWFjFVgzTkD9mfiqYhFEc5ZABlKjzs0hUKJMjZSIzCwI0Sl2ZW6fgo8cFxj9TvQvM7mq7_j1S4SRhbT3tTJV_hSFpuNkI6UTJ1UweKdQO0upCnaYShtdkoNztQR_5Xlhi9AUO9nwkG1xPjzEebtuZvGaWq5miiRd/s1600/advertisement.png' width='100%'/> </a>

<div class='close'>
<label for='offads-adz'>
<svg viewbox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
<path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/>
</svg>
</label>
</div>
</div>
<label class='adsBg' for='offads-adz'/>
</div>
  <script type='text/javascript'>
<!-- pop up by niadzgn -->
//<![CDATA[
str='&3C&73&74&79&6C&65&3E&0A&2F&2A&20&5B&20&50&6F&70&55&70&20&41&64&73&20&62&79&20&4E&69&61&64&7A&67&6E&2E&62&6C&6F&67&73&70&6F&74&2E&63&6F&6D&20&5D&20&2A&2F&0A&2E&63&72&65&64&69&74&2D&31&7B&64&69&73&70&6C&61&79&3A&6E&6F&6E&65&3B&7D&0A&2E&61&64&73&49&6E&6E&65&72&7B&70&6F&73&69&74&69&6F&6E&3A&66&69&78&65&64&3B&74&6F&70&3A&30&3B&6C&65&66&74&3A&30&3B&77&69&64&74&68&3A&31&30&30&25&3B&68&65&69&67&68&74&3A&31&30&30&25&3B&64&69&73&70&6C&61&79&3A&66&6C&65&78&3B&61&6C&69&67&6E&2D&69&74&65&6D&73&3A&63&65&6E&74&65&72&3B&7A&2D&69&6E&64&65&78&3A&35&30&3B&2D&77&65&62&6B&69&74&2D&74&72&61&6E&73&69&74&69&6F&6E&3A&61&6C&6C&20&2E&32&73&20&65&61&73&65&3B&74&72&61&6E&73&69&74&69&6F&6E&3A&61&6C&6C&20&2E&32&73&20&65&61&73&65&3B&6F&70&61&63&69&74&79&3A&31&3B&76&69&73&69&62&69&6C&69&74&79&3A&76&69&73&69&62&6C&65&7D&0A&2E&61&64&73&49&6E&6E&65&72&20&2E&61&64&73&42&6C&6F&63&6B&7B&70&6F&73&69&74&69&6F&6E&3A&72&65&6C&61&74&69&76&65&3B&77&69&64&74&68&3A&39&35&25&3B&6D&61&78&2D&77&69&64&74&68&3A&66&69&74&2D&63&6F&6E&74&65&6E&74&3B&62&61&63&6B&67&72&6F&75&6E&64&2D&63&6F&6C&6F&72&3A&76&61&72&28&2D&2D&77&61&72&6E&61&2D&6B&6F&74&61&6B&29&3B&62&6F&72&64&65&72&2D&72&61&64&69&75&73&3A&31&35&70&78&3B&7A&2D&69&6E&64&65&78&3A&33&3B&2D&77&65&62&6B&69&74&2D&74&72&61&6E&73&69&74&69&6F&6E&3A&61&6C&6C&20&2E&32&73&20&65&61&73&65&3B&74&72&61&6E&73&69&74&69&6F&6E&3A&61&6C&6C&20&2E&32&73&20&65&61&73&65&3B&70&61&64&64&69&6E&67&3A&31&30&70&78&3B&6D&61&72&67&69&6E&3A&30&20&61&75&74&6F&7D&0A&2E&61&64&73&49&6E&6E&65&72&20&2E&63&6C&6F&73&65&7B&77&69&64&74&68&3A&33&30&70&78&3B&68&65&69&67&68&74&3A&33&30&70&78&3B&70&6F&73&69&74&69&6F&6E&3A&61&62&73&6F&6C&75&74&65&3B&76&69&73&69&62&69&6C&69&74&79&3A&68&69&64&64&65&6E&3B&61&6E&69&6D&61&74&69&6F&6E&3A&30&73&20&6C&69&6E&65&61&72&20&32&73&20&66&6F&72&77&61&72&64&73&20&64&65&6C&61&79&65&64&53&68&6F&77&3B&74&6F&70&3A&32&35&70&78&3B&72&69&67&68&74&3A&2D&32&70&78&3B&2D&77&65&62&6B&69&74&2D&74&72&61&6E&73&66&6F&72&6D&3A&74&72&61&6E&73&6C&61&74&65&28&2D&35&30&25&2C&2D&35&30&25&29&3B&74&72&61&6E&73&66&6F&72&6D&3A&74&72&61&6E&73&6C&61&74&65&28&2D&35&30&25&2C&2D&35&30&25&29&3B&7D&0A&2E&61&64&73&49&6E&6E&65&72&20&2E&63&6C&6F&73&65&20&6C&61&62&65&6C&7B&6D&61&72&67&69&6E&3A&30&3B&64&69&73&70&6C&61&79&3A&66&6C&65&78&3B&61&6C&69&67&6E&2D&69&74&65&6D&73&3A&63&65&6E&74&65&72&3B&6A&75&73&74&69&66&79&2D&63&6F&6E&74&65&6E&74&3A&63&65&6E&74&65&72&3B&68&65&69&67&68&74&3A&31&30&30&25&3B&62&61&63&6B&67&72&6F&75&6E&64&2D&63&6F&6C&6F&72&3A&76&61&72&28&2D&2D&77&61&72&6E&61&2D&74&6F&6D&62&6F&6C&2D&63&6C&6F&73&65&29&3B&62&6F&72&64&65&72&2D&72&61&64&69&75&73&3A&35&30&25&3B&63&75&72&73&6F&72&3A&70&6F&69&6E&74&65&72&7D&0A&2E&61&64&73&49&6E&6E&65&72&20&2E&63&6C&6F&73&65&20&73&76&67&7B&77&69&64&74&68&3A&32&32&70&78&3B&68&65&69&67&68&74&3A&32&32&70&78&3B&70&61&64&64&69&6E&67&3A&30&3B&6D&61&72&67&69&6E&3A&30&3B&62&61&63&6B&67&72&6F&75&6E&64&3A&74&72&61&6E&73&70&61&72&65&6E&74&3B&66&69&6C&6C&3A&23&66&65&66&65&66&65&7D&0A&2E&61&64&73&49&6E&6E&65&72&20&2E&61&64&73&42&67&7B&62&61&63&6B&67&72&6F&75&6E&64&3A&72&67&62&61&28&30&2C&30&2C&30&2C&2E&33&35&29&3B&6F&70&61&63&69&74&79&3A&31&3B&76&69&73&69&62&69&6C&69&74&79&3A&76&69&73&69&62&6C&65&3B&64&69&73&70&6C&61&79&3A&62&6C&6F&63&6B&3B&70&6F&73&69&74&69&6F&6E&3A&66&69&78&65&64&3B&74&6F&70&3A&30&3B&6C&65&66&74&3A&30&3B&77&69&64&74&68&3A&31&30&30&25&3B&68&65&69&67&68&74&3A&31&30&30&25&3B&7A&2D&69&6E&64&65&78&3A&32&3B&2D&77&65&62&6B&69&74&2D&74&72&61&6E&73&69&74&69&6F&6E&3A&61&6C&6C&20&2E&32&73&20&65&61&73&65&2D&69&6E&3B&74&72&61&6E&73&69&74&69&6F&6E&3A&61&6C&6C&20&2E&32&73&20&65&61&73&65&2D&69&6E&7D&0A&2E&61&64&7A&3A&63&68&65&63&6B&65&64&20&2B&20&2E&61&64&73&49&6E&6E&65&72&7B&6F&70&61&63&69&74&79&3A&30&3B&76&69&73&69&62&69&6C&69&74&79&3A&68&69&64&64&65&6E&7D&0A&2E&61&64&7A&3A&63&68&65&63&6B&65&64&20&2B&20&2E&61&64&73&49&6E&6E&65&72&20&2E&61&64&73&42&6C&6F&63&6B&7B&6D&61&72&67&69&6E&3A&30&20&61&75&74&6F&20&2D&35&30&25&7D&0A&2E&61&64&7A&3A&63&68&65&63&6B&65&64&20&2B&20&2E&61&64&73&49&6E&6E&65&72&20&2E&61&64&73&42&67&7B&62&61&63&6B&67&72&6F&75&6E&64&3A&74&72&61&6E&73&70&61&72&65&6E&74&3B&6F&70&61&63&69&74&79&3A&30&3B&76&69&73&69&62&69&6C&69&74&79&3A&68&69&64&64&65&6E&7D&0A&40&6B&65&79&66&72&61&6D&65&73&20&64&65&6C&61&79&65&64&53&68&6F&77&7B&74&6F&7B&76&69&73&69&62&69&6C&69&74&79&3A&76&69&73&69&62&6C&65&7D&7D&0A&0A&3C&2F&73&74&79&6C&65&3E'; document.write(unescape(str.replace(/&/g,'%')));
//]]>
</script>

8. After that, click save and see the results.

That's all for this tutorial and I apologize if I encrypted the code because there are so many people who take the codes on my blog and change the class names, and even worse, delete and do not include the source link.