Tuesday, April 20, 2010

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.

lavalamp

document_letter_upload_thumb14 Click here to see the demo

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

box_zip_thumb23 lavalamp_0.1.0.zip

0128[6]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>

 

 

 

 

0128Depending 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.

Labels: , , ,

1 Comments:

Blogger Beben said...

yeah thats the lava...so smooth

April 20, 2010  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home