A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Steps Adding the jQuery Drop-Down menu

Step 1. If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search for the following code:

]]>

And before/above it, add the following CSS code:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#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: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Step 3. Now find this piece of code:

And add this code immediately before/ABOVE it:

Step 4. Click on Save Template button.

Step 5. Now go to Design (or Add a layout) > Page Elements > click on "Add a gadget" link and choose HTML/JavaScript, then paste the following code in the empty box:

#">Home

#">Link 1

#">Drop 1-1

#">Drop 1-2

#">Drop 1-3

#">Link 2

#">Drop 2-1

#">Drop 2-2

#">Link 3

#">Drop 3-1

#">Drop 3-2

#">Drop 3-3

#">Drop 3-4

#">Link 4

#">Link 5

#">Link 6

Note :
You must change links titles and replace the # symbol with the URL address of each of your links
Then click on Save

Important:

- if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
- if drop down links are not showing, do the following:

Go back to Design > Edit HTML and search (CTRL + F) for this code:

You should change 1 with 3 and no with yes like this:

Save the Template.
Now go to Page Elements and drag your menu immediately below your header.

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags: Без рубрики

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot andrey пятница, 26 апреля 2013 г. No Comment

by Jillur Rahman

No Comment

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot andrey пятница, 26 апреля 2013 г. No Comment

by Jillur Rahman

No Comment

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot andrey пятница, 26 апреля 2013 г. No Comment