Search & Find

Sponsor Post

Best Telegram Groups List Collection - Updated

Saturday 25 August 2018

How to Add Floating Pop-Up Ads to Blogger blog with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to add a floating ad pop-up widget to the Blogger blog with pictures.
Add Floating Pop Up Ads To Blogger

What is the Floating Popup Ad widget?

Floating ads popup widget means when someone visits our blogger blog or any post the gadget appears in the middle of the screen and showing some advertisement on it, using this widget you can show your visitor some particular ads like affiliate ads, AdSense ads, banner ads, etc...

Why we need to add the Floating Popup Ads widget in the blog?

I am sure this post help you to maximize your Blogger blog earnings, now first of all you understand that this is a trick to boost your blog earning, but if you run this Ads widget then set a time limit (like set some second like 7 to 10 sec) because if you displaying this widget to much it will be harm your ad network like they suspend your ad network, now let's start.

These are the Following Steps:- Step 1: First go to the Blogger blog dashboard and select the Layout option then here find out the place where you add the gadget and click Add a Gadget link.
Add Floating Pop-Up Ads to Blogger with Pictures 1
Step 2: Here we click the HTML/JavaScript gadget option for pasting the Ad code.
Add Floating Pop-Up Ads to Blogger with Pictures 2
Step 3: Now I copy the code and paste it in the content area then click the Save button.
Add Floating Pop-Up Ads to Blogger with Pictures 3
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>*{padding:0px; margin:0px; box-sizing: border-box}
.tw_float_ads_main_Wrap{
    max-width: 500px;
    max-height: 500px;
    position: fixed;
    z-index: 98765;
    background: rgb(251,251,251);
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -200px;
    box-sizing: border-box;
    box-shadow:0 0 3px rgba(0,0,0,0.2);}
.tw_float_ads_close{
    position: relative;
    box-sizing: border-box;
    padding: 35px 20px 30px 20px;}
.tw_float_ads_close #tw_close_button{
   font-size: 25px; 
   color: #00aecd;
   position: absolute;
   top: 0px;
   right: 0px;
   display: inline-block;}
#tw_close_button{
   cursor:pointer;}
#TW_credits{
   font-size: 25px; 
   color: #000;
   position: absolute;
   bottom: 2px;
   right: 2px;
   display: inline-block;
   text-shadow:0 0 3px rgba(0,0,0,0.2);
   text-decoration: none!important;}
</style><div class='tw_float_ads_main_Wrap' id='tw_float_ads_main_Wrap'><div class='tw_float_ads_close'><span id='tw_close_button' style='float: right'><i id='TW_Close_Button' class="fa fa-window-close-o" aria-hidden="true" title='close the Advertisment'></i></span><div>

<!-- Your Advertisement Code Here -->

</div><span id='TW_credits' style='float: right; font-size: 10px;'><a style='text-decoration: none!important; color: #000;' href="https://techtspot.blogspot.com/2018/08/add-floating-pop-up-ads-to-blogger.html">Ad PopUp Widget</a></span></div><div style='clear:right'></div></div><script type="text/javascript"> var tw_closeButton = document.getElementById('tw_close_button') tw_closeButton.onclick = function(){ document.getElementById("tw_float_ads_main_Wrap").style.display = 'none'; }</script>

Here you want to edit this widget height and width you can just replace the Blue number in code and when you create affiliate or AdSense ad code then replace Red text with your ad code.

Step 4: Now open the Blogger blog to check the results.

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I enabling Floating popup ad widget, you can check my demo blog how this widget looks like and whenever you apply this ad widget in your blog please set a time limit because if any ads get a lot of clicks then the ad network get attention on that ad and if they figured out any suspicious activity then they banned your ad network account permanently.

Read More:- 

16 comments:

  1. Well explained post. Easy to understand the topic of Pop Up Ads.

    ReplyDelete
  2. Nice blog checkout mine Godsbelove.blogspot.com

    ReplyDelete
  3. works best.. just integrated it at bana.co.ke

    ReplyDelete
  4. Replies
    1. Hello,
      this gadget help you to maximize your earning, it's obvious when you add this gadget you have to set a time limit like 5 to 10 second, if you has a nice traffic that means ten Clicks on ads at least !!! (here your visitors thinking if the closing button is not work so they click the your ad)

      Delete
  5. Please dear i have done it on my Blog https://www.wakabiang.com/ But i really want the close button to be working. Help me please.

    ReplyDelete
    Replies
    1. Hello, thanks for your comment and I working on that kind of code where close button is working :)

      Delete
  6. i want to show ads in my posts widget.. ex. random posts vd. but i couldnt find any resorce for myoyun delisi site will be show it.

    ReplyDelete