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:
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:
Instead of the links in BLUE, use your own image links.
And finally save the widget and drag it to the position you want.
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-->Replace the links in RED with the DIRECT LINKS you got from the previous step.
<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-->
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.
8 comments:
Great info. Lucky me I discovered your website by chance (stumbleupon).
I have bookmarked it for later!
my webpage > motor yacht brokerage ecommerce specialist
Good way of describing, and pleasant article to get data on the topic of my presentation focus,
which i am going to convey in university.
Here is my web blog: Diablo
Superb website you have here but I was wondering
if you knew of any discussion boards that cover the same topics discussed in this article?
I'd really like to be a part of online community where I can get comments from other knowledgeable individuals that share the same interest. If you have any suggestions, please let me know. Appreciate it!
Here is my site ... chestfatburner.com
I've been browsing online greater than three hours these days, yet I by no means found any fascinating article like yours. It is beautiful worth enough for me. In my opinion, if all site owners and bloggers made just right content material as you probably did, the internet will be a lot more useful than ever before.
My website: http://chestfatburner.com/how-to-find-a-gynecomastia-surgeon-for-man-boobs-treatment
This is the right web site for anyone who wants to find out about this topic.
You realize so much its almost hard to argue with you (not that I actually would want
to…HaHa). You definitely put a fresh spin on a topic that's been discussed for years. Great stuff, just wonderful!
Feel free to visit my website: Are Low Levels Regarding Oexcess The Extra Estrogen Responsible For Leading To Abnormality?
great issues altogether, you just received a brand new reader.
What would you suggest about your put up that you just made a few days in the past?
Any sure?
My web site ... chestfatburner.Com
If some one wishes expert view regarding blogging and site-building then i recommend him/her
to go to see this web site, Keep up the good work.
my web-site ... What is the cause of " moobs " ?
Having read this I believed it was rather enlightening.
I appreciate you finding the time and effort to put
this article together. I once again find myself
personally spending way too much time both reading and commenting.
But so what, it was still worthwhile!
Feel free to visit my web-site: zorporno.com
Post a Comment