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 !This is one of those widgets, which you would have probably never seen in any BlogSpot or Blogger blog.
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-->Before pasting the code, REMEMBER to replace the links in RED with the DIRECT LINKS you got in STEP2.
<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-->
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">Replace the links (in blue) with the links to your own images. That's it. Your blog looks more professional now :)
<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>