Please note that the steps listed below were used for blogger " Simple " template and it has not been tested on other templates on the blogger platform.
If you are looking to create Hover Menu ans Sub Menu drop down Tabs like the one seen on this blog, we may just have the answer.
I was a little stressed, I must say, when attempting to create a drop down menu for this blog. Most of the information I found created tabs that were mainly static (more like stairs) and therefore did not have that drop down "hover" effect. My search landed me on this page [source: Lovely bookshelf.com] of which all credits are due).
Below I will bestow what worked for us, and also show you an easy way I found to custom these results to better suit your blog design (color, fonts, font size etc).
Stage 1
a) You will need to go to your blogger template and ( Add a Gadget).
b) look for HTML Javascript and in the popup box you will leave (Title) empty and click into the text box.
Add the following code:
<div id='menubar'>
<ul id='menus'>
<li><a href='LINK'>TabName1</a></li>
<li><a href='LINK'>TabName2</a></li>
<li><a href='LINK'>TabName3</a></li>
<li><a href='LINK'>TabName4</a></li>
</ul>
</div>
Note: These are the tabs that appear horizontally across the bottom or top of blog.These tabs are the ones you see when you access the blog. you may choose to link it to a page if needs be.
You will need to change 'LINK' and replace it with the URL of your page. Were it says >TabName1< you will need to replace it with the name of the page that will show on your blog as a static or clickable tab.
------------------------------------------------------------------------------------------------------
Note: Delete or add as many Tab names as you which just make sure you keep the same format of
<li><a href='LINK'>TabName</a></li> and end the line with
</ul>
</div>
AFTER adding or deleting the last TabName.---------------------------------------------------------------------------------------------------------------------------
NEXT: You will need to add the piece of code that will allow your Tabs to have drop down menus.
Drop the following code below: right between </a> "code here" </li> of which ever TabName you want to show drop downs.
<ul>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
</ul>
This code will give you a total of three drop down menu tabs where ever it is palced.
----------------------------------------------------------------------------------
Example: If you choose to show hover drop down tabs for (TabName4) ONLY. It would look something like this.
<div id='menubar'>
<ul id='menus'>
<li><a href='LINK'>TabName1</a></li>
<li><a href='LINK'>TabName2</a></li>
<li><a href='LINK'>TabName3</a></li>
<li><a href='LINK'>TabName4</a>
<ul>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
</ul>
</li>
</ul>
</div>
-----------------------------------------------------------------------------------
Don't be so alarmed. This is simply saying that out of four horizontal Tab names created,
you only want TabName4 to show the three hover (vertical) drop down menu tabs. Again feel free
delete or add tabs as you deem necessary. This is GREAT way of displaying content in an orderly fashion
without having too many tabs across your header. Important! If you are using the information
have in your "Pages" gadget you will want to remove them and simply link these pages to your created
TabNames and or Drop down Sub Menu tabs.
Stage 2
a) Proceed to your blogger Template (Theme) and select Edit HTML. Don't forget to Save (Back Up)your
template.
b) Next Look for the line that says: <b:skin>…</b:skin>
Note: To find this line simply click anywhere in your template box and hit Cntrl + F and paste
the above line code in search box.
c) Click between the dots (....) of this line (<b:skin>…</b:skin> ) which will expand the code and
reveal a list of blue code.
d) Now find this code ( ]]></b:skin> ) and paste code shown below right between
{
------Code goes here-----
]]></b:skin>
/*-------- Begin Drop Down Menu -------*/ (This line is simply for one to know where code begins)
#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 -------*/
Note: The highlighted information is simply to give you an idea of what values can be changed once your
template is working as you intended. Below I will show you an easy way to find colors that would
match your current tabs.
As you can see above, the (horizontal) Menu Tab Kids Corner & Tips4yourBlog was created using the above HTML method.
Once you hover over this tab it will show other Sub Menu Tabs with its appropriate linked pages.
In order to to change the color, fonts, fonts size,etc. You must first take note of the current
choices used in your original blog template. You will then use this to apply it to the HTML code you added to your
template. Each color has a code which begins with a (#) sign.
It is important for you to change the colors and font, font sizes ( if you choose) by manually making the changes
in the code you added. Areas of possible changes are noted by the yellow highlights. Don't loose heart, this is very,
very simple to do.
Once you get the hang of it, it would actually be fun to play around with.
Hope This was of help to you and don't forget to let us know how it worked out
for your beautiful page.
Happy Blogging !
No comments:
Post a Comment