HELP

The last

two drop down menu tutorials on this blog use
background images in
the menu-tabs, and hence it is not so easy to customize them
for your blogs. So here's a new
widget code, in which
you can easily change the
colors of the menu so as to match with
your blog.

Live demo can be seen here:

Demo1:

ClubVista Blogger Template (In Green)

Demo2:

JavaScript-Array (In Blue) (Widget author's blog)

To add a widget similar to these, follow these steps:

STEP1:

Log in to

Blogger, go to "Layout"
-> "Edit HTML"

STEP2:

Now find this code:

</head>

and immediately BEFORE/ABOVE it, paste this code:

<style type="text/css">

/* menu styles */

#jsddm

{ margin: 0;

padding: 0}

#jsddm li

{ float: left;

list-style: none;

font: 12px Tahoma, Arial}

#jsddm li a

{ display: block;

background:
#324143; /*DARK-GREEN*/

padding: 5px 12px;

text-decoration: none;

border-right: 1px solid white;

width: 70px;

color: #EAFFED;

white-space: nowrap}

#jsddm li a:hover

{ background: #24313C}

#jsddm li ul

{ margin: 0;

padding: 0;

position: absolute;

visibility: hidden;

border-top: 1px solid white}

#jsddm li ul li

{ float: none;

display: inline}

#jsddm li ul li a

{ width: auto;

background:
#A9C251; /*LIGHT-GREEN*/

color: #24313C}

#jsddm li ul li a:hover

{ background:
#8EA344}

</style>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
type="text/javascript"></script>

<script type="text/javascript">

var timeout = 500;

var closetimer = 0;

var ddmenuitem = 0;

function jsddm_open()

{ jsddm_canceltimer();

jsddm_close();

ddmenuitem = $(this).find('ul').eq(0).css('visibility',
'visible');}

function jsddm_close()

{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()

{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()

{ if(closetimer)

{ window.clearTimeout(closetimer);

closetimer = null;}}

$(document).ready(function()

{ $('#jsddm > li').bind('mouseover', jsddm_open);

$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;

</script>

Now before you save the template, make these changes in the
code :

To get the HTML color codes, you can refer to this image:

http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png

STEP3:

and go to "Layout" -> "Page
Elements"

and click on "Add a Gadget",
select it as "HTML/JavaScript"
type

and finally paste this code in to the new widget:

<ul id="jsddm">

<li><a href="#">JavaScript</a>

<ul>

<li><a href="#">Drop Down Menu</a></li>

<li><a href="#">jQuery Plugin</a></li>

<li><a href="#">Ajax Navigation</a></li>

</ul>

</li>

<li><a href="#">Effect</a>

<ul>

<li><a href="#">Slide Effect</a></li>

<li><a href="#">Fade Effect</a></li>

<li><a href="#">Opacity Mode</a></li>

<li><a href="#">Drop Shadow</a></li>

<li><a href="#">Semitransparent</a></li>

</ul>

</li>

<li><a href="#">Navigation</a></li>

<li><a href="#">HTML/CSS</a></li>

<li><a href="http://bloggerstop.net">Blogger Help</a></li>

</ul>

In this tutorial we will use Adobe Photoshop to create some water.

Firstly create a new document - Im using 400px by 300px for this tutorial
however you ca of course use whatever size you want.

Create a new layer and call it "water". Now press Ctrl + A to select everything.
Using the paint bucket tool fill it with #3655B1.

External Image

Now we want to use some filters on our image to actually make it look like
water. Go to Filter >> Noise >> Add Noise. Set the amount to 13% and click OK.

Now go to Filter >> Blur >> Motion Blur. Use the following settings:

Now go to Filter >> Sketch >> Bas Relief and use the following settings:

External Image

Only one more thing to do now. Add another motion blur like we done before
however this time set the distance to 15.

Heres my final result: