Add Dropdown Menus to Blogger with this Code:
This post has supporting code that goes along with the tutorial on Adding Menus to Blogger. This course includes detailed instructions and a video that will walk you though exactly what to do with the code below. Watch the video to learn what to do with this code >>
Step ONE: Plan for your menu bar, creating a sitemap with all the links that you want to use.
Step TWO: Grab this code … replacing it with all your links … then add it into a new HTML widget where you want your menu bar to appear:
<!-- start navmenu --> <ul id='cssnav'> <li class="active"><a href='http://LINK.com'>Home</a></li> <li class="sub"><a href='http://CATEGORY-ONE-LINK.com'>Category 1</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> <li><a href='http://CATEGORY-TWO-LINK.com'>Category 2</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> <li><a href='http://CATEGORY-THREE-LINK.com'>Category 3</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> <li><a href='http://CATEGORY-FOUR-LINK.com'>Category 4</a> <ul> <li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li> <li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li> <li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li> </ul> </li> </ul> <!-- end navmenu --> |
NOTE 1: There is no styling added yet … so this will not look like much just yet. But stay with me 
NOTE 2: You are welcome to add more categories and sub-categories as you need. Just copy the same format as listed in the example.
NOTE 2: You are welcome to add more categories and sub-categories as you need. Just copy the same format as listed in the example.
Step THREE: Go into the Blogger Template Designer (click on CUSTOMIZE … then on ADVANCED … then on ADD CSS) and add the following:
/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1050px; /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}
#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#cssnav li {
float: left;
padding: 0px;
}
#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}
#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}
#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}
#cssnav li:hover ul {
display: block;
}
#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}
#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}
#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
|
NOTE: I’ve listed notes next to a few lines of this code to point out what you can change and style for your own blog.
NameTumbler is another simple domain suggestion tool which allows you to make changes in your domain search. You can decide the placement of your keyword for domain name suggestions. What makes this tool worth a mention is that it allows you to add your keyword and combine it with many keyword suggestions. For example, add it with an animal’s name, add a prefix or suffix, and check availability. In short, it tumbles names to find available domain names!<
