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='' type='text/javascript'/>

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

<div id='float-left'>

<li><a href='' target='_blank' title='Be My Friend on Facebook'><img alt='Be my Friend on Facebook' src=''/></a></li>

<li><a href='' target='_blank' title='Tweet Me'><img alt='Follow Me on Twitter' src=''/></a></li>

<li><a href='' target='_blank' title='RSS This'><img alt='RSS Feed' src=''/></a></li>

<li><a href='' target='_blank' title='Joim My Community Forum Board'><img alt='Join My Community Forum Board' src=''/></a></li>

<li><a href='' title='Email Me'><img alt='Email Me' src=''/></a></li>


<script type="text/javascript">
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);

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