Menubar On Blogger Template

Tutorial

Not so long ago, I received an email from a new found friend on CARI Forum. On CARI she's affectionately known as "Baby Nurin". She had a little problem with her menubar and requested to create a new menubar for her blog at Sebuah Kehidupan.

I guess she's a BlogMaster to several blogs, but on this particular blog Sebuah Kehidupan. she tells her readers about her daily perfect and beautiful life. A typical ups and downs of a married Malay lady's life in Johore. There was a short post in particular that struck me deep into my heart. She was telling about the current economic crisis and how it affected her life when her Hubby got fired!

Enough of that. Back to the main subject. Before I proceed any further, let me explain what is a menubar? Menubar or navigation (bar, button - take your pick) usually located below the header on most blogs. It is where you listed certain links for easier navigation purposes. As you can see on this blog I've listed only four items (links) on the right side of the menubar. They're;

'Home' - default URL for this blog,

'Flag-ship' - my main blog, My Journey To Recovery

'Profile' - default profile on Blogger and

'eMail Me' - as the words imply, click on the link if you wanna get in touch with me.

Well, for Baby Nurin before asking for my help, she had tried her best to create a menubar on her own, but the end-result was not up to her expectation as you can see on the image shown below;

Click image to enlarge

When I had a looked on her blog's template, I noticed that her string of codes had not enough command to create a perfect beautiful menubar. So with her permission, I decided to do a little bit of experiments on her blog's template. After tweaking here and there I finally was able to create a menubar that passed her spec(ification).Positive comments can also provide valuable feedback and what is sometimes more important, encouragement to let you know that your efforts are appreciated and worthwhile.
Thank you Baby for your kind words.

For those who are reading this tutorial, please bear in mind that not all Blogger's templates are compatible to the string of codes that I'm about to show you in a minute. Certain alterations has to be made for it to work correctly. One more thing, I shall not be held responsible for whatever reasons if the codes used causes explosions on your lappy or desktop. And neither do I be held responsible for any hissing sound or smoke emanated from your beloved PC, hehehe! Do so at your own risk, **wink**

Before we do any major hacking, please backup your template and download the image below and host it on your favourite hosting site like PhotoBucket and the like. Keep the image's url in a safe place 'coz we gonna need it later.

Click image to enlarge

Done that? Alright, here's goes;

1. Login to your account with Blogger


2. From your Dashboard click on to your Layout


3. Then click on Edit HTML tab

This gonna be the first part


4. (Without clicking 'Expand Widget Templates') Find the following Code ]]></b:skin>


5. Copy and paste the following string of codes before ]]></b:skin>

#menubar {
background: #000000 url('Complete image URL');
width: 950px;
height: 30px;
color: #FFFFFF;
margin: 0px auto 0px;
padding: 0px;
}

.menubarleft {
width: 450px;
float: left;
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 14px;
font-weight: bold;
text-align: right;
margin: 0px;
padding: 6px 0px 0px 10px;
}

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

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

.menubarleft ul li a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 14px;
color: #FFFFFF;
padding: 0px;
margin: 0px 10px 0px 10px;
text-decoration: uppercase;
}

And we come to the second part. Now you can click 'Expand Widget Templates'. I know you've been wanting to do that all along. Now is your chance. Go ahead, click it, hehehe!


6. Done it? Now please find the following string of codes;

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


7. Copy and paste the following string of codes below the above codes;

<div id='menubar'>
<div class='menubarleft'>
<ul>
<li class='selected'><a href='http://norlieza82.blogspot.com'>HOME</a></li>
<li><a href='http://norlieza82.fotopages.com'>MY FOTOPAGES</a></li>
<li><a href='http://www.friendster.com/norlieza82l'>MY FRIENDSTER</a></li>
</ul>


8. That's it. Preview your blog and if you're satisfied with your works, save your template. And don't forget to give yourself a pat for a job well done.

Below is the image after it was done correctly.

Click image to enlarge

Well, that's it for today. I hope you enjoy the tutorial as much as I do helping Baby Nurin creating a new menubar for her blog.

*A candle loses nothing by sharing its flame.

Technorati Tags: baby nurin, blogger template, blogmaster, cari forum, default profile, default url, menubar, hacking blogger template, lappy, navigation button, sebuah kehidupan, tutorial, tweaking blogger template, useful information