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 :)

Credits: UvumiTools

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Google Facebook Twitter More

• Digg
• Linkedin
• Stumbleupon
• Delicious
• Tumblr
• BufferApp
• Pocket
• Evernote

Related Posts

• How To Optimize Your LinkedIn Profile If you haven't yet added LinkedIn to your social media arsenal, it's high time you should. With over 135 million user
• An Easy To Add non-JavaScript Based Orkut Share Button For BlogSpot BlogsThe previous tutorial on how to add an orkut share button in Blogger blogs was based on javaScript, which will definite
• 9 Best Ways To Build Links To Your Blog A lot of bloggers are constantly on the look out for getting as many back links to their blog as possible. The reason
• Ideas For The Burnt Out Blogger We all get burnt out. Blogging day in and day out will do that to you. Sometimes I just sit in front of my computer,