How to add Floating Ads widget for blogger/blogspot

Posted On / 3 comments
Banner advertisement is one of the main ways on how a blogger makes money. Carefully putting ads where visitors can easily see them gives a higher chance of being clicked.

There are lot of techniques on how to strategically put banners, just like putting them on the header, sidebar and below post titles.

And now I will show you a different technique, its about how to add floating banners so that you can put ads in it. Installation of this trick is very easy just like my past tips on blogger widget.

By adding this widget and carefully blending it beautifully with your template, you can increase revenue for your blog.   

DEMO


Features

  • Very easy to install and uninstall 
  • Attractive look that makes visitors click on the ads.
  • Has a close button
  • Gives chance to increase ads earnings.
  • Readers can easily see your ads.

Add this widget


1. Go to your blogger account

2. Click layout > Add gadget > HTML/Javascript.

3. Add the codes below

 <style>
#btftopbar {
height:30px;
width:auto;
background: #005094 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#adsground {
height:600;
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="http://www.fromhobby2money.blogspot.com/
2013/03/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>

 Customize

  • Replace "Ads code here" with your adsense script code.
  • You can change the width by replacing its value160px.
  • 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.


Do you liked it? Kindly subscribe or share our work.

Cheers! 
 

Receive News From The Blog In Your E-mail

Sign up and receive directly in your email. Its free!! Enter your email address and then confirm to begin receiving exclusive news from Blog!


3 comments:

  1. Dont you think that having a floating ad can be quite annoying to some?

    ReplyDelete
    Replies
    1. Yah it could be annoying... but if you use only 1 kind of advertisement, then blend it beautifully to your template... I think it wont be annoying. Some will see it as a decoration (o)

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete

Please read first before commenting:

1.) No spamming please

2.) Do not flood the comment box with links.

3.) To get free updates, kindly subscribe.

4.) Have fun visiting my blog.

x
Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by blogtipsntricks