How to add a horizontal Lava Lamp navigation

From this tutorial, you will be able to add a horizontal lava lamp style navigation menu to your Blogger BlogSpot.

 Click here to see the demo

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

lavalamp_0.1.0.zip

You will need to upload these files to your server.

To add a horizontal Lava Lamp navigation:

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:

 

<span id="preserve153fad06688e4daba0a63153cc59a967" class="wlWriterPreserve"><script type="text/javascript" src="jquery-1.1.3.1.min.js"></script></span> <span id="preservec55a3f5b20c642859020b34d0b920624" class="wlWriterPreserve"><script type="text/javascript" src="jquery.easing.min.js"></script></span> <span id="preservee1ba8ce4b8c2419b8ec01f337d9c4f45" class="wlWriterPreserve"><script type="text/javascript" src="jquery.lavalamp.min.js"></script></span> <span id="preserve4cc7688c44874d529d432ce8ba0d6e6b" class="wlWriterPreserve"><script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script></span>

 

 

 

 

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

 

<ul class="lavaLampWithImage" id="1"> <li><a href="#">Home</a></li> <li><a href="#">Plant a tree</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Ride an elephant</a></li> </ul>

 

 

 

 

Depending on the three, you will need to modify UL class name to the one you want to use: “lavaLampWithImage”, “lavaLampNoImage”, “lavaLampBottomStyle”

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.

This widget is brought to you by Ganeesh.