How to make floating side button?

Arafa Daming - How to make floating button

Today, we will make an interactive floating side button which is moving to the left/right on mouse-over same as my blog side button. First, what you need is :
  • Your blog or website (This tutorial for blogger but applicable for a web page)
  • Button images
  • Yourself
You can download free button as mine at IconFinder
or you can choose your own icon.

Now, here is the method :

1. Go to Blogger dashboard, choose your blog, design and edit html. Expand widget templates.

2. Include jQuery on your web page. This is to make your button more interactive.
Find "//]]>" and paste this code below "//]]>" :

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

3. Make your floating div. Paste the code before </body> tag :


<div id='float-left'>
<ul>

<li><a href='http://www.facebook.com/pai.arafa' target='_blank' title='Be My Friend on Facebook'><img alt='Be my Friend on Facebook' src='http://filex.e-labuan.com/icon/side_facebook.png'/></a></li>

<li><a href='http://twitter.com/pai_arafa' target='_blank' title='Tweet Me'><img alt='Follow Me on Twitter' src='http://filex.e-labuan.com/icon/side_twitter.png'/></a></li>

<li><a href='http://paiarafa.blogspot.com/atom.xml' target='_blank' title='RSS This'><img alt='RSS Feed' src='http://filex.e-labuan.com/icon/side_rss.png'/></a></li>

<li><a href='http://www.e-labuan.com' target='_blank' title='Joim My Community Forum Board'><img alt='Join My Community Forum Board' src='http://filex.e-labuan.com/icon/my_forum.png'/></a></li>

<li><a href='mailto:pai_arafa@yahoo.com' title='Email Me'><img alt='Email Me' src='http://filex.e-labuan.com/icon/email_me.png'/></a></li>

</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
var duration = 150; //time in milliseconds

     $("#float-left ul li a";).hover(function() {
        $(this).animate({ paddingLeft: "30px" }, duration);
        $(this).animate({ paddingLeft: "20px" }, duration);
         }, function() {
         $(this).animate({ paddingLeft: "0px" }, duration);
          });
});
</script>

4. Make a style for that floating div. Find "]]>" and paste the following code before "]]>" :

#float-left { border: 0; position: fixed; top: 100px; left: 0; z-index: 9999;}
#float-left ul { margin: 0 0 0 -40px; list-style: none;}
#float-left ul li a { display: block;}

5. Finish


p/s : This is just a simple example. You can customize more.
You place the all JavaScript  "<script>" just before </body> tag for better web page loading. This is an optional.

Next tutorial is to make "pop-up div". YEAH!!

Write by Arafa Daming
Labels: