Dock Menu For Blogger/BlogSpot Blogs

As Dock-Menu may be something new for you, so just have a visit to this blog to see the widget in action : Dock-Menu (Look at the bottom of the page)

This is one of those widgets, which you would have probably never seen in any BlogSpot or Blogger blog.

Although mostly bloggers love to add these sort of new widgets but usually nobody searches for these widgets/hacks, so I suggest you to subscribe to this blog to get regular updates from this blog directly to your mail and you will never miss any such unusual widget !

Enter your email address:

Now if you are impressed with the widget, and your mind is bubbling with some more ideas to customize it with your own images, lets see how to get it, in to your blog:

Steps to follow:
STEP1:
Download and save these files:
uvumi-dock.css,
uvumi-dock-ie6.css,
mootools-for-dock.js, and
UvumiDock-compressed.js

Zipped File

STEP2:
Upload all those files to Opendrive.com (registration required), and copy their DIRECT LINKS.

STEP3:
Log in to Blogger.com, 
Go to "Design" -> "Edit HTML", and find(CTRL+F) this in the template;

</head>

and immediately BEFORE/ABOVE it, paste this code:

<!--DOCK-MENU-STARTS-->
<script type="text/javascript" src="http://www.opendrive.com/........../mootools-for-dock.js"> </script>
<script type="text/javascript" src="http://www.opendrive.com/........../UvumiDock-compressed.js"> </script>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.opendrive.com/........../uvumi-dock.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.opendrive.com/........../uvumi-dock-ie6.css" />
<![endif]-->
<script type="text/javascript">
var myDock = new UvumiDock("dock");
</script>
<!--DOCK-MENU-STOP-http://bloggerstop.net-->

Before pasting the code, REMEMBER to replace the links in RED with the DIRECT LINKS you got in STEP2.
Save the template, and go to "Design" -> "Page Elements"

STEP4:
Now click on "Add a Gadget" and select it as "HTML/JavaScript" type.
And finally paste this code in to the widget:

<ul id="dock">
<li>
<a href="#home"><img src="images/home.png" alt="Home"/></a>
</li>
<li>
<a href="#orders"><img src="images/orders.png" alt="Orders"/></a>
</li>
<li>
<a href="#tools"><img src="images/tools.png" alt="Tools"/></a>
</li>
<li>
<a href="#stats"><img src="images/stats.png" alt="Stats"/></a>
</li>
<li>
<a href="#users"><img src="images/users.png" alt="Users"/></a>
</li>
<li>
<a href="#sync"><img src="images/sync.png" alt="Sync"/></a>
</li>
</ul>

Replace the links (in blue) with the links to your own images. That's it. Your blog looks more professional now :)