How to add a fish eye image navigation

From this tutorial, you will be able to add a fish eye image navigation like the one below.

 Click here to see the demo (or just take a look at the share this section below this post)

You will need these file(s) for this tutorial:

	fisheye.js
	fisheye-menu.css
	fisheye.zip

To add a fish eye image navigation to your website:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Add the following javascript and style sheet link below right after the opening head tag of your blog:

<link rel="stylesheet" type="text/css" href="fisheye-menu.css" />
<script src="fisheye.js" type='text/javascript'></script>

3. Next, you will need to add the following section code below to where you want the navigation to appear. You can do this by adding a new HTML/JavaScript widget or paste it within your HTML code section of your layout.

<ul id="fisheye_menu"> <li><a href="#1"><img src="home.png" alt="image description" width="82" height="82" /><span>Home</span></a></li> <li><a href="#2"><img src="hand.png" alt="image description" width="84" height="84" /><span>Tutorials</span></a></li> <li><a href="#3"><img src="document.png" alt="image description" width="84" height="84" /><span>Templates</span></a></li> <li><a href="#4"><img src="settings.png" alt="image description" width="84" height="84" /><span>Widgets</span></a></li> <li><a href="#5"><img src="restart.png" alt="image description" width="84" height="84" /><span>Icons</span></a></li> <li><a href="#6"><img src="font.png" alt="image description" width="84" height="84" /><span>Fonts</span></a></li> <li><a href="#6"><img src="download.png" alt="image description" width="84" height="84" /><span>Downloads</span></a></li> </ul>

4. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.