Create Custom Navigation Bar For Blogger

Hello guys! You might have seen various tabs such as home,contact,about & guest post below the header of our blog.
Let me explain you all about these things. Those tabs are just button besides which lies some links. They can be main category of a blog or some important sectors. For an instance if you click on contact button you will be redirected to contact form of blogger smasher. So do you like them.


Yes there are some gadgets which surely can fulfill the navitabs requirement. But they are not fully customizable. We cannot added other things in it as only buttons are allowed. You can compare the difference yourself. See a preview of page list widget below;
Here you can see that the tabs have much spacing. More over in my bar there is google search of my site. But this widget doesn't have it so it may create problem for you. I got this solution to write as for a person in blogger help forum asked me to. So lets do this;

  • Go to dashboard>Layout.
  • There click on Add A Gadget just below your header.
  • Choose Html/Javascript as widget type and paste the below code in the content box;
<!-- Navigation tabs start -->
<div id='smasherlist'>
<a href="1st Linkhere" class="smashertab" title="description of Link 1">Link name to appear</a>
<a href="2nd Linkhere" class="smashertab" title="description of Link 2">Link name to appear</a>
<a href="3rd Linkhere" class="smashertab" title="description of Link 3">Link name to appear</a>
<a href="4th Linkhere" class="smashertab" title="description of Link 4">Link name to appear</a>
<a href="5th Linkhere" class="smashertab" title="description of Link 5">Link name to appear</a>
<!-- Navigation tabs end -->
<!-- –>
  • Now Replace,
  1. The text highlighted by red colour with your respective links.
  2. The text highlighted by yellow colour with the description of your respective links.
  3. The text highlighted by pink with the text that would appear as button.
  • As for the title you can leave it empty. Now, click on save.
Now, you have added the links. But they are simple and ordinary texts. So, It's time to style them. Styling is a major part. So pay attention;

Styling The Tabs;

To style your tabs follow below;
  • Go to dashboard>Template>Edit Html.
  • Then, search for ]]></b:skin> . After you found it just paste the below code above ]]></b:skin>;
/* Navigation tabs start */
a.smashertab, a.smashertab:link,a.smashertabs:visited { width:130px; height:30px; background:#eee; border:1px solid #000000; margin-top:1px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:11px; color:black; line-height:25px; overflow:hidden; float:left;}
a.roundertab:hover {background:#ccc;}
#rounderlist {width:960px; margin:0 auto;}
/* Navigation tabs end */
  • Here in the above code you can do the below editings to suite your taste;
  1. In line 3 change the value of width & height to fit your taste.
  2. In line 3 the value of background with the Html color code you like.
  3. In line 4 change the value of margin-top: in pixels to determine the space outside the border.
  4. In line 6 change the value of color: with the Html code you would like for the appearance of the color of the text inside the buttons.
  • Finally,click on orange save button and you are done.
Now, your tabs are done. Wanna see a preview. It's below;

It's good isn't it. Why don't you try it once.
If you face any complication comment below;
Bye friends and happy blogging!

Share this

Related Posts

Next Post »


comments «Oldest   ‹Older   401 – 415 of 415   Newer›   Newest»
October 3, 2014 at 12:59 AM delete

Pretty! This was an extremely wonderful article. Thank you for supplying this

Feel free to surf to my web site :: Garcinia Pro

October 3, 2014 at 5:04 AM delete

Thank you for the good writeup. It in fact was a amusement account it.
Look advanced to far added agreeable from you!
By the way, how can we communicate?

My webpage - Garcinia Pro Review

October 4, 2014 at 11:24 AM delete

Heya excellent website! Does running a blog similar to
this require a lot of work? I have absolutely no understanding of programming however I was hoping to start my own blog soon.
Anyways, should you have any suggestions or techniques for new blog owners please share.

I know this is off subject however I simply wanted to ask. Thanks a lot!

Take a look at my web-site :: Nature Fit's Colon Cleanse Review

October 4, 2014 at 5:17 PM delete

Hmm it looks like your website ate my first comment (it was extremely long)
so I guess I'll just sum it up what I had
written and say, I'm thoroughly enjoying your blog. I as
well am an aspiring blog writer but I'm still new to the whole thing.
Do you have any tips and hints for inexperienced blog writers?
I'd certainly appreciate it.

Feel free to surf to my blog :: Titanium Pro X Reviews

October 5, 2014 at 9:57 PM delete

Vous écrivеz constamment des pοsts passionnants

my blog sexe hardcore

October 7, 2014 at 2:01 PM delete

Good information. Lucky me I ran across your site by accident
(stumbleupon). I've saved it for later!

My blog post tennis nutrition (

October 18, 2014 at 12:09 AM delete

I needed to hank you for this wonderful read!!
I defintely loved every bit of it. I have ggot you book-marked to check out new stuff you post…

Also visit my blog ... ulei de argan pret ()

October 19, 2014 at 3:29 AM delete

Very soon this website will be famous aamid all blogging and site-building viewers, due
to it's fastidious articles

my homepage ... m88

February 6, 2015 at 7:20 PM delete

my profile image is under my blog posts now. and not beside it,how do i change the width of my posts so that i have a side bar again

April 21, 2015 at 6:12 AM delete

Really Nice Information,Thank You Very Much For Sharing.
Web Development Company

October 22, 2015 at 1:15 PM delete

I don't see and option to add such a widget under my header.
Note: I removed my actual header, so all you see in the layout section is the box that says header in it, but no "add" undr it.

November 21, 2018 at 5:16 AM delete

Thanks for sharing this amazing read! I loved the article
Learn Djign from Skratch DJ academy which provides best DJ Courses in delhi

December 20, 2018 at 2:56 AM delete

hello everyone i am from USA penis enlargement and erectile dysfunction has been a problem to me for more than 5 years,my wife always get disappointed with me when ever we have sex in bed,i don’t last for up to three minute,during sex, i have taking different medication but to no solution,then i went on the net for a solution on how to enlarge my penis and i got DR SALATO who help in cure erection and ejaculation problem with his product and also help to enlarge penis,i got in touch with him througAah is email or website ,he replied me and gave me steps to follow and i got his herbal product. which i took for just 2 weeks and my premature ejaculation is now normal and my erection is hard and my penis got bigger up to 10 inches and 6.5 girth than before and now i can last long in bed. now 10.5 inches long on erection and off course very large round. I am very happy for this Penis Enlargement experience no side effect
with DR SALATO you are in safe hands your healing is assured or
website you can for whatsapp number: +2348103629945 thanks

«Oldest   ‹Older   401 – 415 of 415   Newer›   Newest»