How to add Floating Ads widget for blogger/blogspot

Posted On / 7 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!


7 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
  3. I'm kind of confused. Why did you add a function to make people who hit close on the ad be forwarded to this page within the code?

    ReplyDelete
  4. ah sorry about that, you can remove that link by replacing the url address of this post

    kindly look for this

    a href="http://www.fromhobby2money.blogspot.com/2013/03/how-to-add-floating-ads-widget-for.html"

    Then delete this code - http://www.fromhobby2money.blogspot.com/2013/03/how-to-add-floating-ads-widget-for.html - or replace it with blank

    I hope this helps

    Cheers :-)

    ReplyDelete
  5. This comment has been removed by the author.

    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