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.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

15 comments

Write comments
Anonymous
May 11, 2009 6:38 AM delete

Your demo is broken

Reply
avatar
May 11, 2009 8:02 AM delete

Ya the site seams to be down...anyways that's a pr5 website and i think it'll definitely come up shortly :)

Reply
avatar
May 12, 2009 6:22 PM delete

Hi Dsai,
The widget is great but I am afraid the javascript file for this widget can slow down page load time which wont be an encouraging thing.

Dsai when ever I use your search box I get only titles appearing instead of half summary or full post. Now that is really a great trick and I would love to know it as soon as possible in your next post.

Reply
avatar
May 12, 2009 6:27 PM delete

Dsai I would appreciate if you could join me in the Dofollow Compaign. My further comments would be based on whether you turn your blog into a DOfollow one or not :)

This post may help,
Submit your site to 160 Social bookmarking sites Plus Make your blog a Dofollow OneRegards,
MOHD___

Reply
avatar
May 12, 2009 11:49 PM delete

Hi Mohd,
Wherever JavaScripts are present in the blog, then of course they'll be heavier than the usual HTML elements, but these things are relative,
If you really have a great idea by which you can use such a widget in your blog to increase subscribers or if a widget like this improves the appearance of the blog, then can definitely go for it. Initially readers may not like to see the site taking time to load, but once the widget loads completely (which'll be done within a few seconds of course), then they will like the widget and the site too...

To show only titles, you may read this post:
http://bloggerstop.net/2009/01/show-only-titles-in-blog-archives-with.html

Making this blog a "dofollow blog" is not possible for me, atleast not now....I'm a student and already i'm devoting more time towards blogging....than i actually should.......and by turning this blog into a dofollow blog will only increase the spam comments, and so i have to give even more time towards monitoring the comments ......

Anyways I appreciate the idea of "dofollow", and if you/anyone thinks that they can manage their time to stop spam comments, then you must go for it...

Regards
Sai

Reply
avatar
May 13, 2009 10:54 AM delete

Thks for the reply! I am going to read the post you suggested.

Reply
avatar
May 27, 2009 12:19 AM delete

Social book marking is the best of getting the popularity for a sit..

Reply
avatar
miranda
March 23, 2010 1:33 AM delete

Hello, I tried this lovely dock menu in my blog. But found that your codes looks work fine but if I use my own image then something goes wrong. I want to know that is there any specialty with the image files? I use some little bmp, jpeg, but when my blog load completely nothing shows on the menubar. Please help me. (In this moment I am not sharing my blog address because it is under construction.)

Thank you

Reply
avatar
March 23, 2010 9:53 AM delete

Well if you want me to check your code Miranada, then I will certainly need your blog address, you can use my contact page if you do not want to share the adress publicly.

Reply
avatar
July 01, 2010 3:50 PM delete

hey sai,
i have done evrything complelety but my images are not showing , when i move my cursor over them then a image is shown...this also happens in only 2 icons rest no image is coming..

can u please sort out..
me waiting
thanx saurabh
http://itzsoftwareworld.blogspot.com/

Reply
avatar
July 04, 2010 8:42 PM delete This comment has been removed by the author.
avatar
July 04, 2010 9:11 PM delete

no, i was right the first time- this is dodgy- all I get were giant amounts of ads & pop-ups & no download...
Yr stuff is usually so good hey- this was a total waste of time.... very dodgy- but I guess u help e1 for free on here, so an occasional bit of dodginess is forgiven...

Reply
avatar
October 07, 2010 3:52 PM delete

hola que mas me funciono el codigo del scrip pero me gustaria que quedara en la parte de abajo osea pegada al lateral del blog parte inferior , osea que no quedara en agregar un script del blog

Reply
avatar
January 31, 2011 8:30 PM delete

how to change position of this dock? i got only two places where i can place my widgets and I would like stick them on the bottom of my blog.

Reply
avatar

Comments are moderated on this blog

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

Comment Like This! and Optimize your blog EmoticonEmoticon