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

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.

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

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

</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.