Sign up for PayPal and start accepting credit card payments instantly.

Wednesday, January 14, 2009

Menubar On Blogger Template


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;

Not so beautiful menubar
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.

Shiny black menubar
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

  4. This gonna be the first part

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

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

  7. #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!

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

  9. <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>

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

  11. <div id='menubar'>
    <div class='menubarleft'>
    <li class='selected'><a href=''>HOME</a></li>
    <li><a href=''>MY FOTOPAGES</a></li>
    <li><a href=''>MY FRIENDSTER</a></li>

  12. 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.

New beautiful perfect menubar for Baby Nurin
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.

Subscribe to My Journey To Recovery

A candle loses nothing by sharing its flame.

23 Responses to "Menubar On Blogger Template"

Anonymous said...

kali nie Arahman7 plak yang buat kiter terkembang kempis... he3..

Cuma.. nak tya ttg complete img URL yang di merahkan tur..

maksudnyer kiter perlu buat backround utk menubar dulu then save kat photobucket la? nak buat backround menubar tur secara manual ( guna photoshop dsb )?

kalau salah guna kod pun akan ader kemudaratan kepada pc jugak ker?

ArahMan7 said...

Hehehe! Biasala. Org berbudi kita berbahasa.

A'aa. Upload imej menubar yg kat atas tu dan hostkan kat mana image hosting pilihan Lieza. Tp pastikan panjangnya sama dgn ukuran blog Lieza.

Imej menubar yg kat atas tu tak perlu Lieza alter apa2 lg kerana imej tulah yg ArahMan7 guna utk blog Lieza.

Utk soklan yg last - Takde la. Sj ArahMan7 nak sakat, hehehe!

Anonymous said...

mcm mn nak kira ukuran ( pjg menubar ) dgn blog kiter tur???

Anonymous said...

Biasanya ArahMan7 akan merujuk kpd panjangnya header blog kita. So, Lieza tengok dlm mode 'Edit HTML' panjangnya header blog kita. Macam Lieza punya header, panjangnya 950px. Tengok kat, * Outer-Wrapper

Sebenarnya, menubar Lieza tu ArahMan7 bagi dua - 450px sj. Kalo nak tulis yg disebelah kanan, Lieza kena tambah kod utk yg disebelah kanan.

Lieza boleh godek sendiri dgn merujuk kpd 'menubarleft' yg sedia ada sebagai rujukkan.

Semuga berjaya.

~ ArahMan7

Anonymous said...

kiter kene blajar html kod dgn arahman7 nie.. sbb mmg tak tau aper pon ttg html kod nie

ahat said... tgh mencari tutorial pasal menu bar ni..mcm mana kalau nk guna menu bar color lain?yg u ajar tu untuk hitam kan..boleh edit kat code kat atas tu ke?

Anonymous said...

I keep getting this message. Don't know what to do.

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference.

Anonymous said...

i can't do mine :(
i failed .. please help me..
email me :

ArahMan7 said...

Hola 360-BOOTH,

I'm using an image (for the menubar) on this post. Here's another post which is quite easy to follow.

Read, Adding Menubar Without Using Image.

For an example, view My Little Mermaid for a beautiful Menubar.

Hope you're able to create a Menubar for your blog.

See you around.

~ ArahMan7

Seo experts said...

thanks for sharing the coading of blogger menu bar, i implement it future

Anonymous said...

That is a great tip especially to those fresh to the blogosphere.

Brief but very precise information… Thank you for
sharing this one. A must read article!

Here is my weblog; read this

Anonymous said...

It's very trouble-free to find out any matter on web as compared to books, as I found this piece of writing at this web site.

My weblog; golden labrador puppies

Anonymous said...

Hello would you mind stating which blog platform you're working with? I'm looking to start my own blog in the near
future but I'm having a hard time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I'm looking for something
completely unique. P.S My apologies
for getting off-topic but I had to ask!

Also visit my web site:

Anonymous said...

Greetings from Idaho! I'm bored at work so I decided to browse your site on my iphone during lunch break. I enjoy the information you provide here and can't wait to take
a look when I get home. I'm shocked at how quick your blog loaded on my cell phone .. I'm not even
using WIFI, just 3G .. Anyhow, wonderful site!

Here is my webpage :: Click Reference

Anonymous said...

Do you mind if I quote a few of your articles as long as I provide credit and sources back to your
webpage? My blog is in the very same niche as yours and my users would really benefit from a lot
of the information you provide here. Please let
me know if this ok with you. Cheers!

my website; fantastic platinum golden retrievers details

Anonymous said...

Thanks designed for sharing such a fastidious opinion, post is good, thats
why i have read it fully

My website: click to read more

Anonymous said...

We are a group of volunteers and starting a new scheme in our community.
Your website provided us with valuable info to
work on. You have done an impressive job and our whole community will
be thankful to you.

Feel free to visit my homepage golden retriever puppy

Anonymous said...

Hello I am so excited I found your blog, I really found you by
error, while I was searching on Askjeeve for something else, Anyways I am here now and would
just like to say kudos for a marvelous post
and a all round interesting blog (I also love the theme/design), I don’t have time to read it all
at the minute but I have book-marked it and also included your RSS feeds, so
when I have time I will be back to read a lot more, Please do
keep up the fantastic b.

Look into my web page - click to read more

Anonymous said...

Greetings! Very helpful advice within this article! It is the little changes that make the biggest changes.
Many thanks for sharing!

Also visit my blog; handy golden retrievers dogs details

Anonymous said...

Hi, i think that i saw you visited my site thus i came to “return the favor”.

I am attempting to find things to enhance my web site!I suppose
its ok to use a few of your ideas!!

My homepage; Full Report

Anonymous said...

Hοwdy, i read уοur blog occaѕіonаlly and
i οwn а ѕimilar οne and і wаs
just wonderіng if yοu get a lοt of spаm гesрonses?

If so hoω ԁо you preνent it, anу plugіn ог аnуthіng уou can suggest?
I gеt so much lately it's driving me insane so any assistance is very much appreciated.

Feel free to visit my webpage - fast way to lose belly fat

Unknown said...

ralph lauren outlet
louis vuitton outlet
pandora jewelry
sac longchamp pas cher
oakley sunglasses
oakley sunglasses
polo ralph lauren outlet
coach factory outlet
moncler outlet
pandora outlet

قمم التميز said...

شركة جلي رخام بالرياض
شركة عزل خزانات المياه بالرياض
شركة عزل خزانات بالرياض
عزل خزانات المياه بالرياض
شركة عزل خزانات المياه

Post a Comment

I loves to receive comments from everybody and I tried to make everything easier for my readers to comments. So please, be nice even though you totally disagree with me. No comment moderation and whatnot here. So, please respect the privileges given.

God's willing, all comments will be followed and replied.

p/s Please leave your URL so that I can follow it and leave comments on yours. No URL = No Comments. It is as simple as that. Thank you in advance.

~ ArahMan7

PS - Word verification has been enable. Sorry about that [Sept 3rd, 2013].

Back To Top