Thursday, August 4, 2011

How to Add Menu To Blogger

Source : Garden Bloggers

Step #1: 
Backup your template and save it in case you do anything wrong you can always upload it and go back to your original template. Another option is to try this first on a test blog and if you do it without any damage to your test blog then you can proceed to do it on your own garden blog. To implement this you need do the header modification that allows you to add gadgets to your blogger header.

Step #2:
DynamicDrive.com provides a number of free horizontal menus you can add. For the Chicago Gardeners blog I chose "thick underline menu." So I copied the The CSS code they provided leaving out the very first line and the very last line. Look carefully, see what I didn't bother to copy?  at the very bottom.

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.underlinemenu{
font-weight: bold;
width: 100%;
}

.underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid gray; /*bottom border is 3px*/
}

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}
I just pasted this into my template before the footer code and previewed to make sure I didn't make a mistake then saved my template. The next step was to copy all of the HTML code they provide that will create the links/buttons that people will click on to navigate your garden blog.



In your header add an HTML/JavaScript gadget and past the above code.
Read detailed post here: Garden Bloggers

No comments:

Popular Posts