Blog Tutorial - Flying ad

Flying Ad. Honestly i just don't know what title does suit this post exactly. But i don't care, i'll deem you all here know what i actually wanna say to you by its weird title. I say it flying ad is because by making this style, your ad won't be on your header, body, sidebar, or even on your footer, but it's flying/above/next to the page. - Did you get it?. Please say you got it guys, don't break my heart.

Well, it's something hard at all to make your ad looks flying on your blog, just follow the instructions below.

1. Loggin to your Blogger.
2. Go to Design.
3. Add a new Html/javascript widget and put the code below in the box.

<style type="text/css"> #fad {position:fixed; top:10px; z-index:+1000;} * html #fad {position:relative;} .fadcontent {float:right; border:2px solid #888; background:white; padding:10px;} </style> <script type="text/javascript"> function showHideFad() {var fad = document.getElementById("fad"); var w = fad.offsetWidth; fad.opened ? moveFad(0, 30-w) : moveFad(20-w, 0); fad.opened = !fad.opened;} function moveFad(x0, xf){ var fad = document.getElementById("fad"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; fad.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveFad("+x+", "+xf+")", 10);} } </script> <div id="fad"> <div class="fadtab" onclick="showHideFad()"> </div> <div class="fadcontent"> <div style="text-align:right"> <a href="javascript:showHideFad()"> Double Click to Close </a> </div> <center> Put Your Ad Here <script type="text/javascript"> var fad = document.getElementById("fad"); fad.style.center = (30-fad.offsetWidth).toString() + "px"; </script> </center> </div> </div>

The code in the box above looks like the below.

<style type="text/css">
#fad {position:fixed; top:10px; z-index:+1000;}
* html #fad {position:relative;}
.fadcontent {float:right; border:2px solid #888; background:white; padding:10px;}
</style>
<script type="text/javascript">
function showHideFad() {var fad = document.getElementById("fad"); var w = fad.offsetWidth; fad.opened ? moveFad(0, 30-w) : moveFad(20-w, 0); fad.opened = !fad.opened;} function moveFad(x0, xf){ var fad = document.getElementById("fad"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; fad.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveFad("+x+", "+xf+")", 10);} }
</script>
<div id="fad"> <div class="fadtab" onclick="showHideFad()"> </div>
<div class="fadcontent"> <div style="text-align:right">
<a href="javascript:showHideFad()"> Double Click to Close </a> </div>
<center>
Put Your Ad Here <script type="text/javascript">
var fad = document.getElementById("fad"); fad.style.center = (30-fad.offsetWidth).toString() + "px";
</script>
</center>
</div>
</div>

Just replace the "Put Your Ad Here" with your ad code and you're done. It's just so easy guys, such a nothing.