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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

24 comments

Write comments
Anonymous
March 12, 2009 11:49 PM delete

hey dude can u make a post on DOCUMENT WIPE EFFECT i have seen it on DYNAMIC DRIVE.Com but not understand how to do tht

Reply
avatar
March 13, 2009 7:58 AM delete

Hi Arham,
You can reply to my comment here:
http://bloggerstop.net/2009/03/new-multi-level-drop-down-menu.html

Reply
avatar
March 13, 2009 12:17 PM delete

hi, nice blog
Your Blog is More interesting.great work.:)
moreover, ...if possible at ur free time visit mine..and give ur suggestion ..

Reply
avatar
March 13, 2009 5:41 PM delete

Thnx TechBlizz, I'll surely visit your Blog !

Reply
avatar
March 14, 2009 9:25 AM delete

Sorry if this is a stupid question, but how do I change the links? Do I put them in front of #?

Reply
avatar
March 14, 2009 9:30 AM delete

I found that you can only link to posts or pages in your own blog. Is it possible to change the links manually? I'm guessing it would take a new code for this...

Reply
avatar
March 14, 2009 10:50 AM delete

Yes you can manually change the links to any page/web site you want....

Remove those #home, #orders etc entirely (including #)

And put some link there, like this:

<li>
<a href="http://bloggerstop.net"><img src="images/home.png" alt="Home"/></a>
</li>

Reply
avatar
March 14, 2009 11:09 AM delete

Thanks! How can I change the back ground or font color? The text is cut off on my blog.

Reply
avatar
March 14, 2009 11:41 AM delete

you can change the font color by editing "uvumi-dock.css" file, BEFORE uploading it !

by default, it'll be:

color:#fff; (where #fff is white color)

Reply
avatar
March 17, 2009 3:23 AM delete This comment has been removed by a blog administrator.
avatar
March 24, 2009 7:00 AM delete This comment has been removed by a blog administrator.
avatar
March 26, 2009 5:59 AM delete

Thank you, sir! I got a lot of helps from your instruction. web-design is totally strange to me; I know nothing about that, but I complete my blogger step by step due to your favors! Really appreciate!

I am curious that whether I can put the dock menu to other places instead of the bottom, please?

Finally, still tons of thanks!

Reply
avatar
March 26, 2009 8:12 AM delete

Yes dude, you can change the position of menu.
You have to edit the UvumiDock-compressed.js file before uploading it.

You'll see this line in it:
var UvumiDock=new Class({Implements:Options,options:{position:'bottom'

So change the position to either top, left or right...

Reply
avatar
Anonymous
March 27, 2009 1:33 AM delete

Thank you, sir!

I followed your instruction, but only 'top' and 'bottom' works.
If I change the script to 'left' and 'right', the dock menu disappears.

I have one more question: is there any way to show the whole dock menu? My dock menu hides a half before moving the mouse cursor on it.

Excuse me I ask many questions in a row ^^"

Appreciate and have a nice day!

Reply
avatar
March 28, 2009 2:09 PM delete

Well for all your questions, the most simple answer I have is that you have to edit the same (UvumiDock-compressed.js) file, and then upload it !

Reply
avatar
April 17, 2009 6:56 PM delete

plz help me i am using ie7 and the image of the links in the bottom bar has a cross... if u go to my blog via firefox u have no problem using ie7 it apears with a corrupted cross on the links

PLEASE HELP!!!

and can u tell me how to put the bar on the left side instead of the bottom?

Check my blog to se what is hapening with the butttons!

Reply
avatar
May 08, 2009 2:14 AM delete

sir i used the top opyion instead of bottom
but my problem is that it is going at full top
can i make it little below
i mean below the name of the blog or so
plz help

Reply
avatar
September 14, 2009 9:18 AM delete This comment has been removed by a blog administrator.
avatar
February 08, 2011 5:00 PM delete

ciao ho risolto anche il mistero crocetta sulle immagini. In pratica va caricata su un hosting anche l'immagine "blank". Poi bisogna acquisirne l'url e sostituirlo al nome presente nel file "uvumiDock-compressed". Ora il menu funziona perfettamente anche in IE grazie ^_^

Reply
avatar
February 08, 2011 7:46 PM delete

Well, I can't understand what your query is...but if it is regarding hotlinkfiles/hosting the files, then I have updated the post and replaced hotlinkfiles with opendrive, so open your account at Opendrive and rest of the tutorial remains the same. I hope it solves your problem.

Reply
avatar
February 09, 2011 2:27 AM delete

hello, I'm sorry I was not clear. I solved the problem (red cross on the images) load image "blank" in a host and then inserting link "blank" within the js file. Now I no problems :)

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon