Hide and show floating button or box

Just now, i made a floating box for advertisement in my blog. My friends ask me how to that, and now, I'll write a tutorial for that.

Actually, it's use same concept as floating site button that i do before. Using jQuery and fixed position for div. With jQuery, we can hide and show the floating box(div). You can see the example at the bottom right corner of my blog.

Go to your Blogger Dashboard, Choose Design and Edit HTML.


1. First, the most important is jQuery, add jQuery to your site by add this code :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

paste this code below "//]]>"


2. Second, add the floating box to your page. Paste this code before </body> tag :

<div id='show-ads'><a class='show_ads' href='#'><img border='0' src='http://4.bp.blogspot.com/-BvB09OYSv6k/TcIb44DlnrI/AAAAAAAAAJk/jyCLo4TUgNc/s1600/back_blue_button.png'/></a>
</div>

<div id='float-right'>
<a class='close_ads' href='#' style='font-size:large;' title='Close this ads'><img border='0' src='http://2.bp.blogspot.com/-hBb8a4rsAR4/TcH3FSbyoKI/AAAAAAAAAJg/X_4n5iuU8t4/s1600/button_blue_close.png'/></a><br/>
Your script here.(I copy and paste my Nuffnang ads script here)
</div>



3.Third, add styling for the box (to make the box floating). Paste this code before ]]></b:skin> :

#float-right { border:0; position:fixed; bottom:0; right:0; z-index:99999; text-align:right; overflow:hidden;}
#show-ads { border:0; position:fixed; bottom:320px; right:0; width:0px; z-index:99999; text-align:right; font-size:large; overflow:hidden;}



4. Lastly, the jQuery action script. You can paste this code before or after the floating box code at the stage 2.

<script type='text/javascript'>
$(document).ready(function(){

     $("a.close_ads").click(function() {
        $("#float-right").animate({ width: "0px" });
        $("#show-ads").animate({ width: "100px" });
          });

     $("a.show_ads").click(function() {
        $("#float-right").animate({ width: "160px" });
        $("#show-ads").animate({ width: "0px" });
          });

});
</script>


Done! Have a try.
Practicing make experience! :D

Write by Arafa Daming