How to add Floating Ads widget for blogger/blogspot

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! 
 

Facebook Blogger Plugin: Bloggerized by Bloggerpreneur Enhanced by fromhobby2money.blogspot.com