Lee A Verday's Blog ~ BlogBeginners.com | Beginner's guide to blogging

Adding a Menubar on Blogger's template

Updates a few hours after publishing the original post. I'm still not satisfied after I clicked on the 'Publish Post' button. My first try to create a Menubar for Lee A Verday's Book/Writing Blog didn't go quite well (see image on problem no. 3). I was using an image for the Menubar, but no image was used for my second try. Come on below at no. 4 to read how I did it. Happy reading guys...

Awhile back I received a lovely comment from Lee A Verday on BlogBeginners. It seem like he was trying to create a Menubar for his blog.

In fact, when I looked into his Page Source he has even pasted a string of codes which I used to help a fellow Blogger to create a Menubar for her blog. I'm sorry Lee, that piece of code that you paste on your template is not compatible for your blog.

From then onward, I took a special interest to help him out to improve his blog. He was using a three column Cafe Blog template which was designed by J.aghili. For those who would like to use this free Blogger's template, you can download it on Final Sense.

I've even downloaded it on one of my test blog so that I can do a little bit of tweaking on the codes to improve the image and probably adding a Menubar. Below are a few suggestions that I would like to make as per comment on Lee A Verday's Book Writing Blog when I asked for his permission to take a further look in his blog.

On the right sidebar, at the very top below 'The Hollow Rated H' ads you can see plainly the word "/center>" as shown on the image below;

Click image to enlarge

Solution:
If you look on your template, I'm sure you've forgotten to type in the character < for the tag 'center'.

This maybe nothing, but for those who have keen eyes they will notice there's a black spot under the Header's banner as you can see on the image below;

Click image to enlarge

Solution:
In 'Edit HTML' mode try finding this string of codes;

/* ---( header and site name )--- */
#header-wrapper { margin: 0; }
#header { margin: 0; height:208px; width:903; color: $pagetitlecolor; background: url('http://lh6.google.com/jvdmds/R19jjboNgMI/AAAAAAAAA_k/T0mA5B6nr2E/cafe-1.jpg') no-repeat top left; overflow: hidden}
#header h1 { width:600px; font: $pagetitlefont; margin:40px 40px 5px 30px; padding: 10px; filter: glow(color=#ffffcc,Strength=8); text-align:left;}
#header h1 a { text-decoration: none; color: $pagetitlecolor; }
#header h1 a:hover { color: $descriptioncolor; }
#header .description { margin:-10px 5px 5px 30px; width:600px; text-align: left; font: $descriptionfont; color: $descriptioncolor; }

Change the red-coded tag accordingly to your Banner URL, width and height. I see that your banner width is 919px. It's advisable to crop your banner to the original image width of 903px. You can leave the rest of the codes as it is.

Sorry about your Menubar. It didn't go as plan as you can see on the image below;

Click image to enlarge

Solution:
Back to the drawing board. Got some adjustments to make.

As usual before you do any high-powered tweaking on your template (sound like military, huh?), I implore you to backup your template. You wouldn't wanna know how many times it has saved my arse just for doing that simple backup. As I always said, I shall not be held responsible if following my tutorial resulted a hissing or unwanted sound coming from your favourite lappy or desktop. Do so at your own risk, **wink**

Solution:
Okay, let's get on with this short tutorial. This will be the first part for your style found in CSS. In 'Edit HTML' mode, find the tag ]]></b:skin>

After finding the tag, please copy and paste the following codes before ]]></b:skin>

#menubar {
background: #527841; ---> you can change to any colour
width: 903px;
height: 24px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 14px;
font-weight: bold;
text-align: left;
}

.menubar li {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
}

.menubar ul {
margin: 0px;
padding: 0px 0px 0px 0px;
}

.menubar ul li a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 14px;
padding: 0px;
margin: 0px 10px 0px 10px;
text-decoration: normal;
}

Got that? Good! Now we have come to the second part. Like my earlier tutorial on Menubar on a Blogger's template, find the following codes;

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Then you copy and paste the following codes right after the above string of codes;

<div id='menubar'>
<div class='menubar'>
<ul>
<li class="selected"><a href="http://leeaverday.blogspot.com/">Home</a></li>
<li><a href="http://leeandjessverday.blogspot.com/">About About Me & Jess</a></li>
<li><a href="http://leesbookreviews.blogspot.com/">Book Reviews</a></li>
<li><a href="http://laverday.blogspot.com/">The Hollow Trilogy</a></li>
<li><a href="http://leeverdaycontests.blogspot.com/">Contests</a></li>
<li><a href="http://aboutmyfavoritejess.blogspot.com/">Ode To My Partner In Thyme</a></li>
<li><a href="http://www.jessicaverday.com/">Jessica Verday</a></li>
</ul>
</div>
</div>

And this is how your Menubar will show as you can see on the image below;

Click image to enlarge

Well, that's it. Hope you like the Menubar.

Here's something about Lee A Verday. He is the husband of author, Jessica Verday. He's a student, at WGU, working on my B.A. Lastly, he's also a dad to 5 furry felines who cost him money and scratch his legs up. But Petey, Tobey, Clarence, Baby Abbey and the troll who lives under his couch (shandi) are the best.

So, if anyone who are into books and writing, head on over to Lee A Verday's Book/Writing Blog. It's okay, you can thanks me later, lol!

That's all for now folks. See ya' when I see ya'.