Tuesday, July 30, 2013

Add Floating AdSense and Other Ads On Sidebar Of Your Blog

Author: Gagan Masoun
Add Floating AdSense and Other Ads On Sidebar Of Your Blog
Many bloggers are using floating ads on their blogs. Because they are earning much money with floating ads. If your blog's sidebar has no more ad space then you can use these ads. By using floating technique we can generate more click on AdSense or other ads. Today in this tutorial we will guide you how to show 160px x 600px floating AdSense ads on right or left side of your blog. Before displaying ads please read carefully about TOS of your respective ad network that are they allow to float ads or not?

Demo

Add This Widget to Blogger Blog

  • Go to Blogger Dashboard » Layout
  • Click On Add a Gadget
  • Choose HTML/JavaScript.
  • Copy The Below Code and Paste it In "HTML/JavaScript" Gadget.
<style>
#blogsdaddyflotads {
height:30px;
width:auto;
background: #333333 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#bdadsbase{
height:600;
margin:0auto;
width:160px;
background:#fff;
border-bottom:2px #333333 solid;
border-right:2px #333333 solid;
border-left:2px #333333 solid;
text-align:center;
padding:4px;
}
#bdadsheadline{
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("bdadsheadline").style.display = 'none';
}
</script>
<div id="bdadsheadline">
<div id="blogsdaddyflotads">
<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.blogsdaddy.com/2013/07/float-adsense-on-sidebar-of-blogger.html" target="_blank" rel='nofollow' onclick="getValue()">close(x)</a></span>
</div>
<div id="bdadsbase">
<h3></h3>
<p align="left"><h3></h3></p>
<p>                                                                                                                           
Your Ad Code Here
<br/></p></div></div>

Customization

  • Replace "Your Ad Code Here" With Your Own Ad Code.
  • Change 160px to Increase or Decrease Width.
  • Change Left With Right to Float Right Side Of Your Blog.
Got any questions? Feel free to ask in the comments box below. Happy Blogging :)

5 comments:

  1. Hi,the floating gadget i have inserted doesn't dispal in mobile.Why?

    ReplyDelete
    Replies
    1. Hello,

      Because CSS for this widget designed for only desktop version.

      Thanks
      Gagan

      Delete
  2. I anxiously waiting for your answer

    ReplyDelete
  3. iam installed it in my site but u linked the close button to this page pls remove it and how to remove it

    ReplyDelete
    Replies
    1. Go to coding and search this page. Just remove it and then re-install.

      Delete