How To Create Floating Ads In Blogspot

Bismillah Alhamdulillah, when we visited the blogs of others, may we be bothered with ads that are always there and float in front of us will read the article that we should spend a few clicks.

Now blogger widget will explain how to create ads that float. An easy way once, before going to do, it is good we see the first contohya, how's that floating ads? Click here(Sample Embede Code For Ad)  to view the ads that float or you can see the picture below

Picture Sample Embeded Code For Ads

Now go straight to how to create floating ads

• As usual you are logged into blogger
• Design and hold your click and go to edit HTML
• after open to edit the HTML, you check the Expand Widget
• Your next step This Copy Script Below
• Now you search tags <bod>
• See you after the tag, paste the following code above body tag
• CSS Code

<style type='text/css'>
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

• Java Script Code

<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById(&quot;gb&quot;);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(&quot;gb&quot;);
var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>

• Full Code

<style type='text/css'>
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById(&quot;gb&quot;);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(&quot;gb&quot;);
var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>


<div id='gb'>

<div class='gbtab' onclick='showHideGB()'> </div>

<div class='gbcontent'>

<div style='text-align:right'>
<a href='javascript:showHideGB()'>
Click here 2x if you interfere with this ad
</a>

</div>
<center>


Sample Embeded Code For Ads:
<center><!-- Begin: http://adsensecamp.com/ -->
<script src="http://adsensecamp.com/show/?id=41qia1QxAWw%3D&cid=TlffQoaJN%2F0%3D&chan=5rmfvn3ojG4%3D&type=12&title=3D81EE&text=000000&background=FFFFFF&border=FFFFCC&url=2BA94F" type="text/javascript">
</script>
<!-- End: http://adsensecamp.com/ -->
</center>


</center>
<script type='text/javascript'>
var gb = document.getElementById(&quot;gb&quot;);
gb.style.center = (30-gb.offsetWidth).toString() + &quot;px&quot;;
</script></div></div>

• When finished click save, and do not forget that you replace the blue code with your existing ad code

About the Author

I'm Hung Duy, the founder of Xml Blogger Templates (XBT). I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. I'm blogging since 2006 and I'm currently a guest blogger on Blogging With Success.
Follow Me on Twitter or On Facebook

Visit xmlbloggertemplates.com for more Blogger Templates

Posted in: Ads,Blogging,Embeded Code