How to make an elastic thumbnail menu for Blogger

How to create a cool mouse hover elastic thumbnail menu for Blogger. How to create an elastic image slider for Blogger. Super cool elastic thumbnail image slider using jQuery.

This cool widget was the creation of Sam Dunn on Build Internet. All the credit for this widget goes to Sam Dunn from Build internet.
I found this widget really really cool and sexy. I thought that this great elastic style widget should be gifted for Blogger as well. I was working on this, and finally created the implementation for Blogger. I would like to discuss on how to install this widget for your Blogspot.

Steps to follow to install the cool image slider on Blogger:

1. Go to Dashboard > Template > Edit HTML

2. Search for ]]></b:skin> and just above that paste the following code:

CSS Styling for the menu:


and
Just below ]]></b:skin> paste the following code:
JQuery code for the Elastic menu slider


Save the template!!

3. TWO WAYS to INSTALL the GADGET:
 (3 MENUS used in the below code)
 a) Use a HTML/JavaScript gadget to place the code below the header
 b) Directly on your post HTML page 
 Place the following code in there:
<div><br /><br> <div> <a href=”http://www.itechcolumn.com/URL”><img src=”http://www.itechcolumn.com/IMG.JPG” style=”border:1px solid black;” /></a><a href=”http://www.itechcolumn.com/”><img style=”border:1px solid black;” src=”http://www.itechcolumn.com/IMG.JPG” /></a><a href=”http://www.itechcolumn.com/URL”><img style=”border:1px solid black;” src=”http://www.itechcolumn.com/IMG.JPG” /></a> <!–Template for each menu item–> </div><br /><br> </div><br /><br> <p><a style=”float: right” href=”http://buildinternet.com/”>Created by Sproing</a><br/><a style=”float: right” href=”http://www.itechcolumn.com/”>Modified by</a>

Note: Please do not remove the attribution to the widget. The hard work of the original author needs to be appreciated. Please do place a link to my site for modifying the widget for Blogger

CUSTOMIZATION:
1. To place N number of menus:
<a href=”URL” class=”menuitem”><img src=”IMG.JPG” style=”border:1px solid black;”/></a>
This is the code with URL= Your page url
IMG.JPG= Your image url to be displayed.

2. Internet Explorer FIX (in CSS code above):
img { -ms-interpolation-mode: bicubic; }

3. Other details available in the form of comments with the code itself. Please paste the code in a word or textpad to view them clear and make the customization accordingly.
Look at the demo on my demo page with title “Image slider Elastic for Blogger”

I hope you enjoyed this awesome and cool elastic thumbnail menu slider for Blogger
Happy learning and enjoy..


~iTechColumn