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

21 thoughts on “Dock Menu For Blogger/BlogSpot Blogs

  1. 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

  2. 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…

  3. 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!

  4. 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…

  5. 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!

  6. 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!

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

  8. 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.

  9. 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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *