Dock Menu For Blogger/BlogSpot Blogs

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-https://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

Leave a Reply

21 Comments on "Dock Menu For Blogger/BlogSpot Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
Anonymous
Guest

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

View Comment
Divya Sai
Guest
TechBlizz
Guest

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

View Comment
Blogger Templates
Guest

Thnx TechBlizz, I’ll surely visit your Blog !

View Comment
snam
Guest

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

View Comment
snam
Guest

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…

View Comment
Divya Sai
Guest

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="https://bloggerstop.net"><img src="images/home.png" alt="Home"/></a>
</li>

View Comment
snam
Guest

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

View Comment
Divya Sai
Guest

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)

View Comment
snam
Guest

Thanks!

View Comment
kidult's sphere
Guest

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!

View Comment
Divya Sai
Guest

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…

View Comment
Anonymous
Guest

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!

View Comment
Divya Sai
Guest

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 !

View Comment
Comissão Informática
Guest

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!

View Comment
pratik agarwal
Guest

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

View Comment
Divya Sai
Guest

@ Everybody:

A solution to all your queries is here:

|| An easy to position FishEye Dock Menu For Blogger Blogs ||

View Comment
Soffio di Dea
Guest

bellissimo effetto grazie!

View Comment
Soffio di Dea
Guest

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 ^_^

View Comment
Sai - Blogger Help
Guest

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.

View Comment
wpDiscuz