A Simple Dock Menu (FishEye Menu) For BlogSpot Blogs

Similar to the previous dock menu, explained a few weeks back, here is another great widget for your blogspot blogs (will work in blogs based on any other platform too).
A fisheye-menu/dock menu is a menu with pictorial menu items which zoom on mouse-hover, and are linked to different web pages.

Check out the widget in action: Fish Eye Menu

As positioning the previous widget was somewhat confusing for most of the bloggers, so I found this one at MarcGrabanski, which can easily be placed at any location in the blog with simple HTML widgets.

Remember to subscribe to this blog, for more such great widgets and hacks.

Follow these instructions, to add this widget:

STEP1:
Download these two files as a zipped file:
fisheye.js
fisheye-menu.css

Download the zipped file.

STEP2:
Upload the files to MyDataNest (you have to register before uploading the files)
Now copy the DIRECT LINKS to the two files.

STEP3:
Log in to Blogger, go to Layout -> Edit HTML
and find (CTRL+F) this in the template code:

</head>

Now immediately ABOVE/BEFORE it, paste this code:

<!--FISHMENU-STARTS-->
<link rel="stylesheet" type="text/css" href="http://mdn.fm/files/18...._x.....3s/fisheye-menu.css" />
<script src="http://mdn.fm/files/18..._....2v/fisheye.js" type='text/javascript'></script>
<!--FISHMENU-STOPS-http://bloggerstop.net-->

Replace the links in RED with the DIRECT LINKS you got from the previous step.
Now save the template.

Then go to Layout -> Page Elements, and click on "Add a Gadget" and select it as "HTML/JavaScript" type.
Then paste this code in to the widget:

<ul id="fisheye_menu">
<li><a href="http://google.com"><img src="http://mdn.fm/files/.........../icon.gif" alt="image description" /><span>Icon 1</span></a></li>
<li><a href="http://bloggerstop.net"><img src="http://mdn.fm/files/....../icon2.gif" alt="image description" /><span>Icon 2</span></a></li>
<li><a href="#3"><img src="http://mdn.fm/files/....................../icon.gif" alt="image description" /><span>Icon 3</span></a></li>
<li><a href="#4"><img src="http://mdn.fm/files/...................../icon2.gif" alt="image description" /><span>Icon 4</span></a></li>
<li><a href="#5"><img src="http://mdn.fm/files/....................../icon.gif" alt="image description" /><span>Icon 5</span></a></li>
<li><a href="#6"><img src="http://mdn.fm/files/....................../icon2.gif" alt="image description" /><span>Icon 6</span></a></li>
</ul>

Instead of the links in BLUE, use your own image links.
And finally save the widget and drag it to the position you want.

---