How To Increase Your Revenue with Floating Ads Widget (blogger)

Banner advertisement is simple one of the many to grow you online income with either your blog or website. Therefore carefully adding ads where visitors can easily see them gives a higher chance of being clicked. With that all said there are lots of way on how you can display the banners in appropriate order of arrangement just like putting them on the header, sidebar and below or in the middle of post and post titles respectively.

Now  in this tutorial I will show you a very much different technique of placing this banners on your site.  This are the floating banners and you can custom them to you needs. The installation is rather simple not give you a head working with codes-though somehow involved.

I won’t bother you with much details so let’s go right a head to the step

Firstly you need to be logged in you blogger account and follow the steps below>>>

  1. Go to your blogger account
  2. Click layout > Add gadget HTML/Javascript.
  3. Add the codes below give below
<style>
#btftopbar {
height:30px;
width:auto;
background: #005094 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#adsground {
height:600px;
margin:0 auto;
width: 160px;
background:#fff;
border-bottom:2px #005094 solid;
border-right:2px #005094 solid;
border-left:2px #005094 solid;
text-align:center;
padding:4px;
}

#headlineatas {
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:65px;
left:10px;
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://bloggingkeino.blogspot.com/2018/06/how-to-add-floating-ads-widget-for.html" target="_blank" onclick="getValue()">close(x)</a></span>
</div>
<div id="adsground">
<h3></h3>
<p align="left"><h3></h3></p>
<p>

Ads code here

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

Now that you have copied and pasted the code save the widget and you will be done. Refresh you blog page to see the result.

Further customization is given below

Customize

Replace “Ads code here” with your adsense script code.

You can change the width by replacing its value 160px.

If you want to float it on the right side, change “left” to “right”.

After doing some customization, hit save and check out your new floating Ads.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *