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.

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

• Logo Designing Contests - Art of Making Money OnlineA Logo is almost as important as the company name itself. In fact once a company goes famous, we don't even have to men
• Add Falling Snowflakes / Flowers / Leaves to Your BlogPost Updated: Now this tutorial includes an additional snow-storm script. This hack will display falling snow in your b
• Image Zoom [JQZoom] For Blogger BlogsHere's a creative and innovative way to display large pictures in limited area: that's JQzoom ! Purpose of this hack
• 4 Reasons to Promote Your Blog on Facebook and Twitter This may come as a surprise but a lot of people hesitate when it comes to blog promotion on social media sites like