(simple method)
2 Level Drop-Down Menus in Blogspot (simple method)
Navigation:
1. Login to the Blogger.com >>New Blog >>give the url name >>Create Blog
2. Go to Template >>Customize >>Template >> Select the template here: Simple or Picture or ethereal.
3. Apply to Blog >>Back to Blog
4. Click Layout >>Add a Gadget >>HTML/Java Script
PART 1 + PART 2 := Drop Down Menu
PART 1: Prepare the HTML 2 level menu code and copy past in the HTML/Java Script Gadget
Create the menu's like this:
DropDownName1
DropDownName1
DropDownName1
Answer: 4 tabs in Main menu. In that 4th Tab have 3 Submenus. See the below Code:
Explanation:
1. Create Main menus(tabs): TabName1, TabName2, TabName3, TabName4 are normal tabs.
2. Come to the TabName4 have again 3 sub-menus (ie., drop-down menu with 3 items).
3. We’re going to place the extra lines of code above just before the closing of TabName4.
In Blogger now what you can do:
1. Past the above prepared code in HTML/VBScript Gadget.
2. Here the LINK is direct hyperlink. That should be replace with page link / post link / website URL link. These should be working links in the same blog.
Note: if u have already using any other gadget like pages. Remove that gadget and add the HTML/Java Script gadget then add the html code only.
PART 2: Now Insert the CSS (Cascade Style Sheet):
/*-------- Begin Drop Down Menu -------*/
#menubar {
background-color: transparent;
width: 840px;
color: #424338;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid ##8C001A;
height:35px;
}
#menus {
margin: 0;
padding: 0;
}
#menus ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menus li {
list-style: none;
margin: 0;
padding: 0;
border-left:0px solid #1A6680;
border-right:0px solid #1A6680;
height:auto;
}
#menus li a, #menus li a:link, #menus li a:visited {
color: #FFFFFF; /* This changes the text color of visited links. */
display: block;
font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 5;
/* change margin value to 0 if you want no space between tabs */
/* change 14 to another number to increase or reduce font size */
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#menus li a:hover, #menus li a:active {
background: #424338; /* This is the main menu background color when a user hovers. */
color: #FFFFFF; /* This changes the text color. */
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#menus li {
float: left;
padding: 0;
}
#menus li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#menus li ul a {
width: 140px;
}
#menus li ul ul {
margin: -25px 0 0 160px;
}
#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
left: -999em;
}
#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li
li.sfhover ul, #menus li li li.sfhover ul {
left: auto;
}
#menus li:hover, #menus li.sfhover {
position: static;
}
#menus li li a, #menus li li a:link, #menus li li a:visited {
background: #424338; /* This is the background color for the drop down menu. */
width: 120px;
color: #FFFFFF; /* This changes the text color. */
display: block;
font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
/* change 14 to another number to increase or reduce font size */
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px solid #1A6680;
}
#menus li li a:hover, #menusli li a:active {
background: #424338; /* This is the background color for the drop down menu when a user hovers. */
color: #FFFFFF; /* This changes the text color. */
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
/*-------- End Drop Down Menu -------*/
Now Go To
1. Template
2. Past the above CSS code in this box.
3. Add tag before the above CSS code and also Add end tag after end of the code. Now submenu placed in the position. Now submenu working.
2 Level Menu is ready.
***
The following procedure was very hard process. By mistake if u change any code that should be effect to the template.
Safe side backup your blogger template script:
1. Now go to Template --> Backup / Restore button is there at upper right corner.
2. Click Download the template
Now follow the following procedure if you are familiar with coding.
II Method to past the CSS Code:
1. Template --> Edit HTML
2. Click Skin code ... (3dots) and find the ]]>
Observe here each line of the code line is numbered. Some code is green color.
Now identify the line that says:
It will expand a ton of code, and that code will appear in blue.
Scroll down, and find where the code turns from blue back to green. At that point, there is a line that says: ]]>
Sometimes it gets displaced, so you might want to put it on its own, separate line; some of it might be blue, some might be green. Don’t worry about that: Just make sure all characters stay together: ]]>
3. Now, copy and paste the above CSS code, and paste it on a line immediately BEFORE ]]>
4. After past the code in the template from edit html. Now Save Template and you are done creating drop-down menus in Blogger!
if u want CUSTOMIZING menu COLORS
You can customize these colours to better match your blog’s design by changing the hex values (the 6-digit combination of numbers/letters that appear after #).
Ex: Color codes
Black is #000000
Blue #0000ff
White is #FFFFFF.
Green licht good #00cc99
Green #008000
If u want put the comment in the code for identify your code:
Syntax: /* comment */
Ex: /* the following code is css code for html menus(tabs) */
Color Tools:
1. If u want to change the colours in the menus find the colour codes in HTML Color Picker. The color code is in hex value.
2. Also use the Color Palette Generator to generate a palette of colors that will complement your blog or a specific blog post based on any image you specify!
3. Download Color to HTML Tool. This is offline tool. Best Tool.
***
No comments:
Post a Comment