Iklan Free

Sunday, August 8, 2010

Do you wish your garden blog on Blogger had a fancy horizontal menu near the top like the ones you see on garden blogs powered by WordPress? Well, you can easily add one to your Blogger garden blog by copying and pasting a little bit of code. In this example I'll show you how to add a horizontal menu like the one I added to the Chicago Gardeners blog.

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/ */

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. Just make sure to change these URLs to URLs on your garden blog or to websites you want people to visit. For example I would change the first two as follows

  • Home

  • About

  • Hopefully you get the idea. You can make the links either to posts of yours or links to your photo album or another blog you may have. It is up to you. Once you've done that just save the gadget and move it up or down to where you want it to sit on your header.

    DynamicDrive provides a number of horizontal menus you can use and you can probably find one to match your garden blog colors and style. If you happen to choose one that uses images just right-click the images they provide and save them to your computer. Then upload them to your image hosting site and replace the url in the code with the url where your image is hosted.

    *credit to gardensbloggers.com


    Post a Comment

    Keladi Air Followers

    Keladi Air Members