After much research of watching many, many YouTube videos and reading several blogs; I came to the conclusion that I was going to have to take a little knowledge learned from multiple locations and combine them. This action resulted in the navigation bar that you (most likely) used to get to this post.
How do you get this drop down menu in your own site template? Well you could do a search and find a ready made template and just "install" it to your site. However, in doing that, you limit the amount of customization that can be made - ergo - it is a prefab template. There is no fun nor unique personality portrayed through your site then. Fret not, I have the answer. By going through HTML and Blogger gadget for HTML/JavaScript; and of course a few minutes of your time; you too can have a site navigation bar like the one above. Continue reading to learn how.
Step One.
1. Log into your Blogger account.
2. Once on the Blogger Dashboard, go to Layout.
3. Click on any "Add a Gadget" and find the "HTML/JavaScript" gadget and add it to your layout.
4. A window will pop up. Skip over the "title" field and, in the "content" field past the following code
5. Replace "Category" with the name of the tabs that you wish to have. The "Subcategory" with the name of the, well, subcategory that you want under that tab. And the "#" will later be replaced by the URL that corresponds with the tab, or sub-tab.
Step Two.
1. From the Blogger Dashboard, go to Template.
2. Click over on the "Edit HTML"
3. Locate the
...
4. Click on the
...
5. Scroll down until the blue text turns black. This should be at
6. Paste the following text before
/*-------- Begin Drop Down Menu -------*/
#menubar {
background: #8E8E8E;
width: 840px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:1px solid #B2FFFF;
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:1px solid #1A6680;
border-right:1px solid #1A6680;
height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
color: #FFF;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#menus li a:hover, #menus li a:active {
background: #130000; /* Menu hover */
color: #FFF;
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: #B3B3B3; /* drop down background color */
width: 120px;
color: #FFF;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}
#menus li li a:hover, #menusli li a:active {
background: #130000; /* Drop down hover */
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
/*-------- End Drop Down Menu -------*/
7. Click "Save Template" and close it you. Going back to the Blogger Dashboard.
Step Three.
1. Create a "New Post"
2. Make "Labels" that match what Category or Subcategory that you want it to appear under.
3. Write and title your post. Publish it.
4. Go view your blog. Find the post. Click on the Label link.
5. Once it loads, select and copy the URL to that page.
Step Four.
1. Return to the Blogger Dashboard.
2. Do you remember the "#" (Future URL space) mentioned in Step One? Now is when we return to that. From the Dashboard go to Layout.
3. Locate your HTML/JavaScript gadget. and click on "Edit"
4. Go in and find the Category or Subcategory that name matches the Label that you made
(These two things HAVE TO MATCH EXACTLY)
5. Replace the # in the code with the URL that you copies in Step Three.
6. "Save" and "Save Arrangement" to blog.
Go admire your blog.
No comments:
Post a Comment