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.
Create Custom Navigation Bar For Blogger
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.

SEE THE UPDATED POST BY CLICKING HERE

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>
</div>
<!-- Navigation tabs end -->
<!-- Bloggersmasher.blogspot.com –>
  • 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 */
/* Bloggersmasher.blogspot.com*/ 
  • 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

Previous
Next Post »

411 comments

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

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

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

Reply
avatar
Anonymous
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

Reply
avatar
Anonymous
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

Reply
avatar
Anonymous
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

Reply
avatar
Anonymous
October 5, 2014 at 9:57 PM delete

Vous écrivеz constamment des pοsts passionnants

my blog sexe hardcore

Reply
avatar
Anonymous
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 (raspyapocalypse08.webs.com)

Reply
avatar
Anonymous
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 ()

Reply
avatar
Anonymous
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

Reply
avatar
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

Reply
avatar
April 21, 2015 at 6:12 AM delete

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

Reply
avatar
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.

Reply
avatar
«Oldest   ‹Older   401 – 411 of 411   Newer›   Newest»