How to add beautiful floating banner in blogger? tips you should try to add floating banner in blogger blog

Are you looking for, How to add a floating banner/image into your blogger? 

Like you, I am also starting my blog site as a hobby. Yes, most Bloggers start blog sites as a hobby. With the time improve your blog site you can earn money by using your blog traffic. Also, most people interest to start blogging to making friends, online store sales and make money. So bloggers can earn money from blogging by advertising or containerizing your blog traffic.

We can use our blog site spaces as ad space for advertising or promotional banners. Banner advertising is one of the main ways to earn money by blogging. In that point, we should be careful about put ads. Those ads should visitors can easily see then that gives a higher chance of being clicked.

We can use a lot of techniques to put a banner on our blog sites. You easily put them on the header, below post header, between the posts or sidebars. Would you know rather than the above methods you can add floating banners that you can put ads on it? If you finding How to add floating banner into your blogger blog that article is for you.


The floating ad is a very effective way for bloggers who want to make their sites Ads friendly. Also, it helps to save your space of websites. Not only that also it helps to increase ads revenue rapidly. If you place the ads above the fold you can be generating more ad revenue. So that floating banner methods will help you to place your advertisement above the fold. Also, it helps to increase your ad revenue.

What are the advantages of using floating banners?

• The attractive look of banner ads that make visitors click on ads.
• It’s very easy to install and uninstall from the blog site
• That gives a chance to increase ads revenue earnings
• Readers can easily see your ads
• It has a close button if readers not interested in floating banner ads they can close that floating banner.  

That floating banner ads float with an additional close button. That close button serves as an alternative gadget. If a visitor doesn’t interest or dislike to that floating banner, he or she can close or block that banner by clicking the close button and continue his or her reading.

How to add a floating banner into your blogger blog?

How to add a floating 250*300 banner into Right side bottom corner in blogger?

Step 01.  Go to your Blogger account

Step 02.  Go to your Blogger Dashboard  

Step 03.  Go to the Layout tab

Step 04.  Then Click on Add a Gadgetand select “HTML/JavaScript” Gadget.

Step 05.  Now Copy the below code and Paste it in “HTML/JavaScript” Gadget

<style>

#btftopbar {

height:30px;

width:auto;

background: #005094 url('..');

background-repeat:repeat-x;

text-align:left;

padding-top:4px;

}

#adsground {

height:100%;

margin:0 auto;

width: 100%;

background:#fff;

border-bottom:2px #005094 solid;

border-right:2px #005094 solid;

border-left:2px #005094 solid;

text-align:centar;

padding:4px;

}

#headlineatas {

opacity:1.0;

height:auto;

width:auto;

position:fixed;

top:350px;

right:0px;

border-bottom:1px #005094 solid;

border-bottom:0px blue solid;

color:#333;

padding:0px;

z-index:1001;

font-size:13px;}

</style>

<script type="text/javascript">

function getValue()

{

document.getElementById("headlineatas").style.display = 'none';

}

</script>

<div id="headlineatas">

<div id="btftopbar">

<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em"></span>

<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="https://www.takitakibiz.com/2019/05/add-floating-banner-in-blogger.html" target="_blank" onclick="getValue()">close(x)</a></span>

</div>

<div id="adsground">

<h3></h3>

<p align="left"><h3></h3></p>

<p>

Add your Ad code here

<br/></p></div></div>

Customize

• Replace your ad code with “ Add your Ad code here”
• If you want to float it on the left side, Change “right “
• You can customize your floating banner by changing values in top:350px; right:0px;
• You can change the width and height by replacing values in height:100%; width: 100%;   ( height:600; width: 160px;)

Step06.  Finally, click on the save button and save the gadget.

How to add two floating banners on both left and right side in blogger?

Step 01.  Go to your Blogger account

Step 02.  Go to your Blogger Dashboard 

Step 03.  Go to the Layout tab

Step 04.  Then Click on Add a Gadgetand select “HTML/JavaScript” Gadget.

Step 05.  Now Copy the below code and Paste it in “HTML/JavaScript” Gadget

<script type='text/javascript'>

$(document).ready(function() {

$('img#closed').click(function(){

$('#btm_banner').hide(90);

});

});

</script><br />

<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};

</script><script type="text/javascript">

if (window.jstiming) window.jstiming.load.tick('headEnd');

</script><br />

<!--start: floating ads https://www.thewonderspot.com/--><br/>

<div id="leftads" style="width:160px; height:600px; text-align:left; position:fixed; z-index:1001; bottom:5%;left:1%;">

<div>

<a href="#" id="adclose" style="color:#333333;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;padding-top:3px;padding-right:10px"><a href="https://www.takitakibiz.com/2019/05/add-floating-banner-in-blogger.html" target="_blank" onclick="document.getElementById('leftads').style.display = 'none';">[x]</a>

</a>

</div>

<!--Start Left Ad -->

Add you Ad Code Here

<!--End of Left Ad -->

</div>

<div id="rightads" style="width:160px; height:600px; text-align:right; display:scroll;position:fixed; z-index:1001; bottom:5%;right:1%;">

<div>

<a href="#" id="adclose" style="color:#333333;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;padding-top:3px;padding-left:10px"><a href="https://www.takitakibiz.com/2019/05/add-floating-banner-in-blogger.html" target="_blank" onclick="document.getElementById('rightads').style.display = 'none';">[x]</a>

</a>

</div>

<!--Start Right Ad-->

Add you Ad Code Here

<!--End of Right Ad -->

</div>

Customize

·          Replace your ad code with “Add your Ad code here”

·          You can customize your floating banner by changing values in bottom:5%;left:1%  (bottom:0%;left:1%)

·         You can change the width and height by replacing values in "width:160px; height:600px; (width: 250px; height:300px;)

Step06.  Finally, click on the save button and save the gadget.

How to add floating banners on Footer or bottom in blogger?

Step 01.  Go to your Blogger account

Step 02.  Go to your Blogger Dashboard 

Step 03.  Go to the Layout tab

Step 04.  Then Click on Add a Gadgetand select “HTML/JavaScript” Gadget.

Step 05.  Now Copy the below code and Paste it in “HTML/JavaScript” Gadget

<script type='text/javascript'>

$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});

</script>

<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>

<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSf1kQ3vBqK7Nf2ZPt2ERNN-V3s3Df3D12Qe9pGudTOKku5J64eBeoxsrHCbk8BkypCxYcCoz_63tSsbi4KQ2otpBPg31_dAozhg6SilU9-Id4qfUkWDxamZKRYVgA4nnpP1_AyvlC__-e/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>

<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>

<a href='#' title='Banner ad here'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner ad' src='Banner URL'/></a>or  Add your Ad code here

</div> 

</div>

     Customize

·          Customize your ad code with <a href='#' title='Banner ad here'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner ad' src='Banner URL'/></a>or Add your Ad code here

·         You can change the width and height by replacing values in " max-width:728px;height:auto; ( max-width:990px;height:90px;)

Step06.  Finally, click on the save button and save the gadget.

OK with that above methods you can easily add a floating banner for your blogger as you wish.

If you want to add a personal ad banner image, then use below code and instructions.

Follow the above steps and Replace below personal customize banner ad code with Add your Ad code here.

           <a title="Alt Text" href="Ad URL" target="_blank"><img alt="Alt Text" src="Banner Image URL" width="250px"  height="300px"/></a><br/>

Customize

•   Replace Alt Text with your banner name or advertisement name.
•   Replace Ad URL with banner ads destination URL
•   Replace Banner Image URL with your d banner image
•   Customize the ad banner height and width as you wish by replacing width="250px" height="300px"

That article will help you in placing the floating ad banners as you wish.
I Hope the above 03 tips help you to add a beautiful floating banner into your blogger blog. And if you have any problem or know more fixes on this add floating banner, Please share with us in the comments section below.  

happy blogging.

Tags- How to add a floating banner in blogger blog?

How to add a floating banner to blogger blog?