How to add Tabs on blogger?

[This is old post, you can follow easy steps , with new blogger template designer here]
Here is a step by step procedure to add tabs for your blogger.

STEP-1 Go to Blogger Dash board

STEP-2 Go to layout section of your blog, and go to edit HTML
[Save your template, to make sure that if anything will go wrong, you can restore the things back]
STEP-3: Grab this code
#tabsB {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
      }
    #tabsB ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsB a {
      float:left;
      background:url("http://sites.google.com/site/hackbit/tableftB.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsB a span {
      float:left;
      display:block;
      background:url("http://sites.google.com/site/hackbit/tabrightB.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsB a span {float:none;}
    /* End IE5-Mac hack */
    #tabsB a:hover span {
      color:#000;
      }
    #tabsB a:hover {
      background-position:0% -42px;
      }
    #tabsB a:hover span {
      background-position:100% -42px;
      }

STEP-4 Paste this code(above code) just after body CSS which will look like this
body { 
background:$bgcolor; margin:0; 
color:$textcolor; 
font:x-small Georgia Serif; 
font-size/* */:/**/small; font-size: /**/small; 
text-align: center; 
}

STEP-5 Grab following code (customize the link as per your need)
<div id="tabsB"> 
  <ul> 
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li> 
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li> 
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li> 
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> 
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li> 
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li> 
 <li><a href="#" title="Link 7"><span>Link 7</span></a></li> 
  </ul> 
</div>

STEP-6 Paste the above code in you HTML template after header section (the line which will look like this)
<b:widget id="Header1" locked="true" title="Experimenting Blogger (Header)" type="Header">
</b:widget>

STEP-6 Done!!, save the template and view your blog
You can get some different kind of tab design here

113 comments:

  1. HI there,

    Can you post a link of what the resulting tabs will be, so I can see if I like the layout before doing all of these steps?

    Thanks,
    Alex

    ReplyDelete
  2. Ir better, Could you email me the link? Alexandrews802 (at) gmail.com

    ReplyDelete
  3. How do you actually add things to your tabs? Maybes thats a silly question but I have added the tabs, named them and can't get any further.

    ReplyDelete
  4. Each tab will be a link to some location.
    e.g I link my tabs to a label
    http://www.markandey.com/search/label/hack
    or
    http://www.markandey.com/search/label/[label name]




    To link ur tab to some location
    change the code which u have got in step-5
    <li><a href=\"#\" title=\"Link 1\"><span>Link 1</span></a></li>

    2 things u need to modify here
    1.href : point it to a new address of ur choice
    2.title : give a name

    for example i have given the href and name like this

    <li><a href=\"http://www.markandey.com/search/label/hack\" title=\"Hack\"><span>Link 1</span></a></li>

    ReplyDelete
  5. Thank you, thats great!

    ReplyDelete
  6. How can I make my tab link to several items at once? e.g. I have a book blog and want a tab that will link to all my reviews, giveaways, etc.

    ReplyDelete
  7. @Alipet813
    Tag (label) all ur reviews and giveaways etc and group them.

    link to the label like this
    http://[ur blog address]/search/label/[labelname]

    ReplyDelete
  8. Thanks for this info, but I can't see the tab after following the steps. Why is that? Please help. Thanks.

    ReplyDelete
  9. Can not say anything, why it is not getting displayed.
    But if u have kept the things properly it should display.

    ReplyDelete
  10. I am so glad you posted this. It has saved my life trying to organize my addiction to blogging! Thank you!

    I have one quick question, is it possible to center the tabs at the top of the page instead of aligning them to the left? I'm playing around with this blog http://friendsfamilyetc.blogspot.com right now. Obviously still a work in progress.

    ReplyDelete
  11. @Mamma Christine
    if u paste this code anywhere it will be center of container.
    <div id="tabsB" style="margin:0px auto; text-align:left;"> 

      <ul> 

        <li><a href="#" title="Link 1"><span>Link 1</span></a></li> 

        <li><a href="#" title="Link 2"><span>Link 2</span></a></li> 

        <li><a href="#" title="Link 3"><span>Link 3</span></a></li> 

        <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> 

        <li><a href="#" title="Link 5"><span>Link 5</span></a></li> 

        <li><a href="#" title="Link 6"><span>Link 6</span></a></li> 

     <li><a href="#" title="Link 7"><span>Link 7</span></a></li> 

      </ul> 

    </div>

    Please put this code after div element with id='outer-wrapper'. Hope it will help.

    But its complex CSS problem might arrive, depending on ur theme etc.

    ReplyDelete
  12. Is there a way to change the color of the text of each tab?

    ReplyDelete
  13. Its simple!!!
    wrap ur text in font tag.. [Simple Option]

    OR
    [Complex Option]
    if u r comfortable with CSS, please use it, inline fonts are not gr8 way to do it.

    ReplyDelete
  14. Thanks for the useful information, it was very helpful. However, I wonder if there is a way to move the tabs to the bottom right of the header picture and make them transparent - like this for instance: http://www.phonopsia.co.uk

    cheers!

    ReplyDelete
  15. This is great - I have been looking for this for ages! I have tried it out on my test blog and will put onto my main blogs soon.

    ReplyDelete
  16. HI Markandey Singh:
    hope you are well. i got one question as Anonymous asked on september 5. right now i,m working on test blog and actual blog is different than test. my test blog is cricinfo84.blogspot.com and i want to add 3 tabs on this blog. (you can see it online)home,celebrity,movies and science and tech.
    what will be the process to make tab active. can you write full html code here . please
    thanks
    Daleep Kumar

    ReplyDelete
  17. Yes,You going good
    Now its very simple
    Can u see this (below) code in ur template ?
    =====================================
    <ul> 
    <li><a href='#' title='Home'><span>Home</span></a></li> 
    <li><a href='#' title='Celebrity'><span>Celebrity</span></a></li> 
    <li><a href='#' title='Movies'><span>Movies</span></a></li> 
    <li><a href='#' title='Science and Tech'><span>Science and Tech</span></a></li> 
    </ul>
    ====================================

    just replace the href="#" with the actual link

    like href="http://www.twitter.com"

    or like a label in ur blog
    like href="http://www.markandey.com/search/label/Review"

    ReplyDelete
  18. hello mark, nice post here.. i've been looking for this information for ages.. i've tried some but none of them works for me.. i'm gonna try u're tutorial on my blog.. my main question is how you can add things in ur tab.. fortunately, i was able to read a similar question here, i hope it works. you might want to check my blog, it's about the latest technologies and other stuffs.. :)

    http://techiemaxcorner.blogspot.com.

    Have a great day!

    -A.B. (^c^,)

    ReplyDelete
  19. Hi! This is so brilliant! Thank you for your help! :-)
    Can I please ask you to explain something though. If I want to link a tab to a new window, ie say I name the tab "Contact Me" and I want a new page to open with contact info for instance. How do I do that or is it even possible?

    Many thanks for all your help :-)

    Vicki

    ReplyDelete
  20. Hello Markandey. Thank you for sharing this. I've tried almost all multi-tab blogger codes available in the internet and this is the only one that works for me. I'm now using it in two of my blogs.

    http://techiemaxcorner.blogspot.com
    http://allteaforyou.blogspot.com

    By the way, I tried to modify some codes and added some color to better suit my blog. Thanks again. Keep up the good work!


    - A.B. (^c^,)™

    ReplyDelete
  21. i've tried a lot im not able to get multiple post in a single tab like suppose i wanna post all the poems under a tab.1 is working bu many is not working.

    ReplyDelete
  22. I keep getting an error saying,
    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute "{1}" associated with an element type "href".

    Any Advice?

    ReplyDelete
  23. Hi man,

    I couldn't find step 6 line cods in the template codes of my blog.

    It's driving me nuts. Haha. My blog sucks. Here's my blog. http://make-money-online-shadow41.blogspot.com/ Pls advice me something about my blog. I'm just new to it. I can't even get google adsense. Lol.

    ReplyDelete
  24. @shadow41 upgrade to new blog template, then try these steps

    @Anonymous "I keep getting an error saying...."

    Start from scratch, u might have messed something.

    ReplyDelete
  25. How can I upgrade? Just change the template? I thought this template I'm using is new. Oh well I'll try it. Thanks dude.

    ReplyDelete
  26. @shadow41 Try like this

    Apply any default template of blogger. Then do all modification on top of it

    ReplyDelete
  27. Okay I'll try it man. Thanks. I'll be back if I get to encounter some more problems. Great blog man. Awesome.

    ReplyDelete
  28. Thanks tons 4 making this, may God bless you friend.

    ReplyDelete
  29. Hey Mark. I was wanting to know how to add some tabs on my site so I can organise my list of movies but I'm a little scared of messing up. I was wanting to know if you can look at my site (I must warn you it's an adult blog) and tell me what I need to do or you can give a me the HTML code I need. Thanks

    ReplyDelete
  30. Great share,thx Markandey. Can you advice on same ? as vicky. It will be big help!
    If I want to link a tab to a new window, ie say I name the tab "Contact Me" and I want a new page to open with contact info for instance. How do I do that or is it even possible?

    ReplyDelete
  31. @dimstar4now
    Hi, Linkingto new window works like this
    in step-5 the code which has the link pick one of them and change like this
    (like pick first item)
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    and change to

    <li><a href="http://www.blogger.com/profile/02772138636074016191" title="MyContacts" target="_blank"><span>MyContacts</span></a></li>

    two points to note

    1. href="http://www.blogger.com/profile/02772138636074016191" is to link to ur contact info. U can change this URL to anything else.
    2. target="_blank" is to open the link in new window


    @Grownupshow
    I saw ur website, its cool
    here is a lil modification
    Goto to your HTML template (save so that u can revert if required)
    and change 2 things
    1. in #tabsB CSS change float to center
    2. in #tabs ul CSS change padding to 0px 0px 0 40px
    final CSS should look like this

    #tabsB {
    float:center;
    width:100%;
    background:#F4F4F4;
    font-size:93%;
    line-height:normal;
    }
    #tabsB ul {
    margin:0;
    padding:0px 0px 0 40px;
    list-style:none;
    }

    ReplyDelete
  32. Wow, I'm on it right now, Markandey! Thx tons!

    ReplyDelete
  33. That works great Markandey, thx! Is there a way to use that code to point to a page that has text only, like maybe linking to a text box widget or something? Or can I only use a post with a label? Anyways, thx again!

    ReplyDelete
  34. many thanks. i will try this on my blog.

    ReplyDelete
  35. Hi, i have a 3 column blog. When i do this it works but all my links down the links disappear and you have to scroll down to see them??

    ReplyDelete
  36. Start again...

    Hi, i have a 3 column blog. When i do this it works but all my links down the right handside disappear to the bottom of my blog and you have to scroll down to see them??

    ReplyDelete
  37. It works fine on my other 2 col blog btw but not the 3 col, thanks for your help.

    ReplyDelete
  38. I was sooo excited but then it did not work (it would not let me add my links and titles to the tabs) in my 3 column rounders 4.

    Any ideas would be appreciated bc it looked awesome...just did not work.

    ReplyDelete
  39. Very simple. I have 2 questions though that I am unable to figure out.

    #1 - opening the tab link in a new window - when I add target="_blank" into the code I get errors about tags not being closed. So in my specific tab title below, where do I insert the info. to get it to work?

    [li][a href='http://thebumblesblog.blogspot.com/2009/03/on-music-come-see-show.html' title='Concert Boy'][span]Concert Boy[/span][/a]

    #2 - no matter how I try, I can't get the tab appearance to change - I want them to be Red like the Exploding Boy E template option. so downloaded the left & right ones onto Ripway's hosting site and replaced:

    background:url("http://hackbit.googlepages.com/tableftB.gif") no-repeat left top;

    with:

    background:url("http://h1.ripway.com/Bumbles/tabrightE.gif") no-repeat left top;

    and nothing changes visually. What am I doing incorrectly?

    Thanks!

    P.S. I replaced the <> with [] since your comment box kept trying to implement the <>. How do you make HTML invisible so it is not treated as an action when putting HTML examples into instructions?

    ReplyDelete
  40. how would i change the color of the tabs? I figured out how to change the bar color, and the text, but not the tab

    thanks!

    www.weberstrength.blogspot.com

    ReplyDelete
  41. actually, how would I center the tabs across the page?

    ReplyDelete
  42. Hello. I am new to blogging. Thank you so much for this tutorial. I have added the html code and the link tabs appear on my blog. I have also linked them to a location. Now this may sound stupid but how do I add content to a tab at that location? Where from? For example, one of my tabs says "Contact me". Where do I or how do I insert my email address so it will show when someone clicks on the Contact me tab?

    ReplyDelete
  43. Hi, thank you so much for this template! I actually have the same question as the poster above. My blog is at faithvanhorne.blogspot.com. I added a tab so people could read my short fiction online, and I pointed the address to faithvanhorne.blogspot.com/freefiction . So now, how do I add content to that tag? I'm on the dashboard, I tried looking at the HTML code, and I can't figure it out. Can you help? Thanks so much!

    ReplyDelete
  44. hey.. i implemented your method and it works well for me.
    i just have 2 queries:
    1. can you please tell me how can i put some spaces between the tabs in my page?
    2. how can i change the background color of the tabs?

    ReplyDelete
  45. please mail me the solutions at salilbelani@gmail.com... Thanks in advance

    ReplyDelete
  46. Faith Van Horne & Candy {sorry for the late reply guys. }

    U have to manage to put the content somewhere. Once you are done at some location just add another line in the list
    like
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    Change the title attribute to whatever u want to name it. AND then "href" attribute to the actual URL of content. That's it, you are done!!

    You can keep adding the content

    ReplyDelete
  47. Ricky,
    1. can you please tell me how can i put some spaces between the tabs in my page?
    in the code
    try playing with these values
    #tabsB li {
    display:inline;
    margin:0;
    padding:0;
    }
    if u increase padding u get some space b/w the tabs.

    2. How can i change the background color of the tabs?
    This is lil difficult thing to do, I recomend you to read lil bit of CSS.

    Here are 2 tiny images which are serving as background of the tabs
    http://hackbit.googlepages.com/tableftB.gif
    http://hackbit.googlepages.com/tabrightB.gif
    You have to change them and host again at some location. Then you can change your CSS to use those new images.
    You can also try playing with the color attributes in the existing CSS

    here
    #tabsB a span {
    float:left;
    display:block;
    background:url("http://hackbit.googlepages.com/tabrightB.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#666;
    }

    ReplyDelete
  48. Encouraged by your other readers I copied the two sections your code into my blog template in order to create tabs. Apparently there were no parsing issues in that the system saved the revisions. However, No tabs are visible. What am I missing here? (The original code related to the header section was a little different than what is displayed here.)

    ReplyDelete
  49. I agree with this comment: "I added a tab so people could read my short fiction online..."

    ReplyDelete
  50. excellent work dude............

    ReplyDelete
  51. hi I have this on my blog now that I am just starting and have no idea how to put my posts into the correct tabs..help?

    ReplyDelete
  52. I feel sort of retarded, after having read a number of similar comments and your responses to those, but -- while I understand how one points the tab links to other content --- I don't know how to create other pages. For example, you say:

    >>2 things u need to modify here
    1.href : point it to a new address of ur choice
    2.title : give a name

    But, um, how do I create the new address and the content there? Like, I have all these widgets on my home page with static text, lists of things and such, and I would like to just put them under separate tabs since they are taking up so much space on the home page.

    Sorry if this is a dumb question. I'm really new to blogging.

    Thanks so much for your help! The tabs show up perfectly :)

    ReplyDelete
  53. Miriam Rogers,
    Open all your post, give them a label , like my blog has some of the post labeled as 'hack'
    so the link of tab goes as http://www.markandey.com/search/label/hack
    ur labels will go like
    about
    found it
    design
    before and after
    blah & blah

    U know href portion :P . Read other answers posted by me.
    ---------------------------




    Anonymous,
    For you this tab will not work :(

    may be i can suggest you something, to keep only widgets in tabbed fashion. Let me know your blog address, i will see and let you know.

    ReplyDelete
  54. Hi Markandey! Thank you for the quick response!!!! Now that you have explained how to give labels to posts, I will just put my test widgets into post form, and label them. Thank you so much for the great help!

    ReplyDelete
  55. It works! It works! Hooray!!!!

    ReplyDelete
  56. This comment has been removed by the author.

    ReplyDelete
  57. you are so wonderful I figured it out ten minutes after I wrote you!

    ReplyDelete
  58. Can help me??? i did wad u have posted above but still dun have effect.....

    ReplyDelete
  59. Hi, where would I put that code if I wanted the Tabs above the Title Block?

    Thanks! I appreciate your having the code exerpts in that box. Very clear!

    ReplyDelete
  60. I cannot find the header widget code in my blog's html code. Am I doing something wrong?

    I tried using your second method, but it does not let me control the size of the tab text or color. Do you have any fix? Ideally, I would love to be able to have tabs like on this page. Thanks a bunch!

    ReplyDelete
  61. Hi :) This post has been so so helpful but I'm having trouble. My problem is that I've added the tabs and everything is great EXCEPT the links aren't clickable. Can you help me with this? I've followed everything you've said but I can't figure it out. Thank you so very much!

    ReplyDelete
  62. @.jimaie.marie. @NeverMind @Buttercup
    Guys try following steps in new article of mine, thats very easy to follow and works for most of the people.
    Link is in Yellow Hilighted text at the top of this article.

    ReplyDelete
  63. This comment has been removed by the author.

    ReplyDelete
  64. @Sandy,
    Very good question!!! But let me assure you. I am not trying to do something like that. :D

    Since This CSS requires images & images has to be hosted somewhere , i hosted on my website. Just for making it simple for readers.

    Pointed to be noted is images are at Google server,So I don't have much of control to track who is referring it. tracking how many visitors you got per month does not benefit me at all. Though your doubt is very genuine, It is possible to track.

    @everyone,
    Feel free to upload these images on your own website and change the URL in CSS code.

    ReplyDelete
  65. hi!

    i had try ur method, but its not working
    the problem is, i cannot link it to the new window. it became an error.

    please try me :(

    this is my blog, im new
    http://imageenasee.blogspot.com/

    ReplyDelete
  66. Hi imageenasian ,
    have you saved ur template before??? If yes please restore that. your original template is very different, this method might not work.
    Try using new template and follow easy steps here
    http://www.markandey.com/2010/03/how-to-get-tabs-navigation-bar-on-new.html

    ReplyDelete
  67. ok ive tried
    the thing is
    i cannot link the tab
    i mean when i click Package link, i goes to blank page, like no content
    how can i fix that? plis help me :(

    ReplyDelete
  68. can i ask your something
    why i cant search my blog at google search engine?
    im confused

    ReplyDelete
  69. Mark, this seems to be what I'm looking for, and I've added all the necessary info.. now playing around with links and such.. except mine won't be links, they're static text in tabs at the top of my blog. Can you see what I'm doing wrong? Thanks for any help - www.umwowstudio.blogspot.com

    ReplyDelete
  70. Edit: I should say that some of the links don't have labels to be sent to.. but Tutorials, Altered Items, Papercrafting.. they should all three work

    ReplyDelete
  71. DeeDee,
    Try my new article, that is simple and easy.
    [Link of new article is at the top of this blog]
    http://www.markandey.com/2010/03/how-to-get-tabs-navigation-bar-on-new.html

    ReplyDelete
  72. Yeah.. forget I said ANYTHING at all.. my beautiful husband found your newer post ;) maybe I ought to read EVERYTHING before diving in

    ReplyDelete
  73. To Markandey or anyone,

    Im new to the whole blogging situation. I exactly followed the instructions on how to install tabs on your blog page. Well when I go to check it out on the blog and click the tabs, it keeps saying "The Blog you were looking for was not found." Do you have any suggestions or an answer to fix this situation.

    My blog site is http://teenrove.craveblog.blogspot.com

    Thanks sincerly Ashley

    ReplyDelete
  74. your blog is here...

    http://teenrovecraveblog.blogspot.com/

    between DO NOT TRY these thing if u r new to blogging.

    ReplyDelete
  75. Thanks for this post and the helpful information, but how do you add additional tabs and change to colors that they show? I want to make it blend into my websites color scheme.

    Thanks

    http://www.mochabelle.blogspot.com

    ReplyDelete
  76. HELP, I attempted to add the tabs to my blog and It got all screwed up. Now I've got tabs but can not select them. As well Once I've added them how do I add to them. This is way to new or me. Thanks.

    ReplyDelete
  77. OH BTW - you can e-mail me. I would really appreciate it. Thanks!

    ReplyDelete
  78. Hi Markandey

    I found ur article to be extremely helpful. I just wanted to ask u the following questions:

    (1) Is there a way to relate tabs to an entirely new page?

    (2) Is it possible to create sub-tabs

    ReplyDelete
  79. hmmm really helpful thankx

    ReplyDelete
  80. Thanks so much for the information. However, I can't get the tabs to change color when you click on them? (to show which tab you are on). My blog is http://polishedhaircare.blogspot.com/. Any help would be greatly appreciated!

    ReplyDelete
  81. Rockin man.......

    Thanx a lot....

    Check out me Blog for Demo....

    ReplyDelete
  82. i have this type of error while saving the code please help me

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute "{1}" associated with an element type "href".


    how can i remove this error

    ReplyDelete
  83. hi markandey singh..
    i've been searching for this tutorial for ages..
    fortunately i've found this!
    :D

    i wanna ask you about..

    example
    when you mention,
    'paste the code after the b:kkk'

    do i have to paste it under the b:kk? or beside the b:kkk?..which both means after.

    and also, what should i do if i want to use another design? which part do i have to modify?

    ReplyDelete
  84. Hi Markandey Singh,

    I followed your instruction above to add tab to to my blog and found that the layout was not wat i wanted. I had then tried to restore it by pasting back the template which i had backed-up.

    However, i was unable to restore back to the old template and i kept recieving message indicating that the template cannot be saved due to " Attribution widget is missing".

    Pls help me...

    /Jen

    ReplyDelete
  85. Hi Jen Have u tried this blog of mine http://www.markandey.com/2010/03/how-to-get-tabs-navigation-bar-on-new.html
    This is very very easy to follow and may not bring any layout problem.

    ReplyDelete
  86. This comment has been removed by the author.

    ReplyDelete
  87. i made the tabs and i made a link to it but i cant click on the tabs. please help

    ReplyDelete
  88. Nice work and gongrats for your Blog.

    I have one question if you can help me.

    In witch part of the code i can change the button's color?

    I changed the color of the button's frame but for the buttons them self i can't.

    Thanx in advance...

    ReplyDelete
  89. i'm using tabbed content on my sidebar (widget) and it works just fine, but...

    i was HOPING i could get tabbed content to work in a post (on a page), not just in a widget on the sidebar.

    is it possible? i tried, but it wouldn't line up right. help! thank you in advance. :-)

    ReplyDelete
  90. um...ok...nevermind! you're talking about a nav bar / menu -- i'm talking about tabbed content (javascript). i'd still like to know how to place tabbed content directly on a blogger page though. all the ones i see online are for widgets, and don't align properly within the body of a post on blogger / blogspot. i was thinking, if i just get a regular script for tabbed content, and link the .js file in my source code, would it work on blogger? i suppose there's only one way to find out! however, if you've heard of one specifically made for blogger (custom template), i'd appreciate the heads up. thank you! :-D

    ReplyDelete
  91. @staff for that u can use jquery UI

    Here are the steps
    step1- Include this code in you blog template (html head section)

    <link href='http://www.purplegene.com/style/jquery-ui-1.7.1.custom.css' media='screen' rel='stylesheet' type='text/css'/>
    <script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
    google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
    google.load(&quot;language&quot;, &quot;1&quot;);
    google.load(&quot;jqueryui&quot;, &quot;1.8.0&quot;);

    </script>

    step2-put this code in your post (as html)

    <div id="tabs" style="width:100%">
    <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#buzz">buzz</a></li>
    </ul>
    <div id="foo" >
    foo foo foo foo
    foo foo foo foo
    foo foo foo foo
    </div>
    <div id="bar" >
    bar bar bar bar bar
    </div>
    <div id="buzz" >
    buzz buzz buzz
    </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#tabs").tabs();
    });
    </script>

    ReplyDelete
  92. Here is an example

    http://markandey-experiment.blogspot.com/2011/03/google.html

    ReplyDelete
  93. Hi! This looks like a GREAT place to find what I'm looking for - thanks for posting all of the help, Markandey!

    I'm looking for some help centering my tabs across the white section [body box?] of my blog. It's kind of irritating from a design standpoint, but I'm not great at HTML/CSS/Coding stuff.

    Thank you! :)

    ReplyDelete
  94. Hi, same question: Is there a way to center the navigation bar? And also to change the font and size? Thank you for this tutorial! It's great!

    ReplyDelete
  95. This article is novel, I really love it. I also have some ideas written in my article, you can have a look if you have the interest. We can also discuss different topics.Authentic Soccer Jerseys

    ReplyDelete
  96. Hi,
    Is there any way to import old posts into newly created tabs. I have around 400 posts and It would be waste of time to do it on by one. Thanks

    ReplyDelete
  97. Online Datingvitamins
    Hi,
    Is there any way to import old posts into newly created tabs. I have around 400 posts and It would be waste of time to do it on by one. Thanks

    ReplyDelete
  98. Thanks! Work great for my site

    http://www.mkvfilms.net/

    ReplyDelete
  99. Thanks so much for this! I found the automatic blogger tabs virtually uneditable! Now I can even modify the padding! Thankyou SO much!

    ReplyDelete
  100. Great website and it works! I'm trying to build on your code but I can't get the Contact Us tab to be a link dginrwanda.blogspot.ca. Also not sure how to best setup Archives, Previous Posts, Links that are now in left pane. Any help would be most appreciated!

    ReplyDelete

Your comment will inspire me, Please leave your comment