In this tutorial I will be guiding you on how to put Navigation Tabs in your blog using CSS Tab Designer (look at my navigational tabs at the top of this blog layout). Don't worry about the technical stuff because this is just very easy. All you have to do is just COPY and PASTE codes! But before we can add our Navigational Tabs, I suggest that you read and perform my tutorial on how to put/add an additional widget/gadget (Add a Gadget link) in your Blogger Header.
This is a step by step tutorial on how to put Navigation Tabs in your blog using CSS Tab Designer.1. Download the CSS Tab Designer installer HERE or visit their website at http://www.highdots.com/css-tab-designer/ . CSS Tab Designer is FREE!
2. Unzip the file and install the program.
3. Launch the CSS Tab Designer Program
4. File -> Open samples... Double click on "Tab Menu 8.txt". Your window should look like the one below.
You can choose any of the designs on the Tab Styles column but to make this tutorial simpler lets stick with the Tab Menu 8 (the Pink Navigational Tab Bar). Anyway, you can still use any of these designs using this tutorial.Note: The links on the Preview pane are DEAD LINKS, so navigate the tabs using the links on the Items Pane.
5. Go to C:\Program Files\CSS Tab Designer 2\styles\Tab Menu 8. Upload the files tableft8.gif and tabright8.gif to your Picasa or Photobucket or any image file hosting that you used. After uploading the image files, copy the FILE LINK (direct link) of your files to Notepad or any text editor. Example:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJd7fRnGP_3Mj7eZqPCMXZAgFg15ooYGtmprgdRd7y_OC7msTS7qLQ27CdrGdJmn5dQ3i-MiIgCHw5aIexyzmkH0MKNUEeFjvHD5KnSQFYEHtHIuUnn0OXzr298WkM1G8pt6GddzhK2jfx/s144/tableft8.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoM3JlNdJG4bnnf2A-btjhQViRVLPlSRHXvEo4HUqBeEoLdRgact_LATTKFQcSzazxHFcOxo4KN9CjdSy3CiyflfqtbqMPkHS0Am1j9sWFT3OL4HPOmuix3jHxkDik9riB1FMyc4k9-AK-/s144/tabright8.gif
6. Go back to CSS Tab Designer, click on the Code tab and copy the code that looks something like this:
Click Image to ENLARGE.7. Login to your Blogger account.
8. Backup you Template. PLEASE DO THIS!
9. Go to Layout-> Edit HTML.
10. Locate the code </b:skin>. Just before this code, paste the code that we copied from step #6
11. Locate the code background:url("tableft8.gif") and background:url("tabright8.gif"). Replace them with the FILE LINKS that we copied from step #5. It should look like
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJd7fRnGP_3Mj7eZqPCMXZAgFg15ooYGtmprgdRd7y_OC7msTS7qLQ27CdrGdJmn5dQ3i-MiIgCHw5aIexyzmkH0MKNUEeFjvHD5KnSQFYEHtHIuUnn0OXzr298WkM1G8pt6GddzhK2jfx/s144/tableft8.gif") no-repeat left top;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoM3JlNdJG4bnnf2A-btjhQViRVLPlSRHXvEo4HUqBeEoLdRgact_LATTKFQcSzazxHFcOxo4KN9CjdSy3CiyflfqtbqMPkHS0Am1j9sWFT3OL4HPOmuix3jHxkDik9riB1FMyc4k9-AK-/s144/tabright8.gif") no-repeat right top;
12. Click on SAVE TEMPLATE.
13. Lets now add a Home and an About Me Navigational Tabs. Click on Add a Gadget -> HTML/JavaScript link in your Header and paste the code below
<div id="tabs8" style="float:left;"> <ul> <li><a href="http://YOURBLOG.blogspot.com/"><span>Home</span></a></li> <li><a href="http://YOURABOUTMELINK"><span>About Me</span></a></li> </ul> </div>
If you want to add more navigational links then just add the code
<li><a href="http://YOUROTHERLINKS"><span>About Me</span></a></li>
14. Click on SAVE. Rearrange your Navigation the way you want whether you want it to display on top or below your Header.
15. View your blog. You will now have a Home and About Me navigational links in your blog. Look at the header of my blog as a WORKING EXAMPLE.
If you have any questions, please don't hesitate to ask or drop a comment below. Happy Tweaking!
Subscribe to my RSS Feed 
60 comments:
Hi and welcome to MBC!
Hi Veronica!
Thank you very much! ^_^
Thanks for sharing! Great tips!
A little suggestion, could you change the code in step 13 from "tabsH" to "tabs8" so it can pick up the code from step 6, Tabs8. It took me quite a while to figure out how it works:)
Thanks for pointing that out JCWagons. Sorry for the trouble, my bad.
Again, thank you! =)
Finished editing the mistake pointed out by JCWagons. Readers should not be confused when they read this tutorial. Again, thank you JCWagons! ^_^
Outstanding!
Hi,
I tried and re-tried many times but everytime it showed the same error below.
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Scanner State 24 not Recognized
I followed your step earlier to create a widget for the header and it was fine. But I have problem in creating tabs. Please suggest.
Thanks!
Belle
By the way, here is my blog www.360jewels.blogspot.com
Thanks
Hi Montgomery Blair Sibley!
Thanks! ^_^ It seems to me that you have successfully added Navigational Tabs in your site without any problems.
Congratulations! The navigation tabs in your site looks perfect! ^_^
Hi Belle Chen,
I think that your XML tags are not properly coded.
I suggest that you perform steps 1 to 10, then SAVE your TEMPLATE and then tell me what happens. ^_^ You should not get any error in these steps.
Every thing goes fine, but when I try to "SAVE TEMPLATE" it give me following message:
Please confirm that the following widgets should be deleted. All the widgets' configuration data will be lost.
* HTML1
If I save and confirm, all the changes including newly added menu is lost too.
Please help.
Hi EditorPinoy
I tried step 1-10 again and it showed the same ERROR message. I'm so sad :_(
Please help.
Thanks!
Belle Chen
Hello sharpmind and Belle Chen,
Please follow these steps:
1. Before you perform the tutorial above, REMOVE ALL the gadgets that you have added to your blog. E.g. Followers, Archive, Labels etc.
2. SAVE TEMPLATE.
3. Perform the tutorial above CAREFULLY step by step.
Hope this helps and your TABS will show up ^_^
Top 10 Best-Clean-Professional-Looking Blogger Templates
Also please take note that for every HTML/JavaScript that you add in your blog, the id will increment by 1. For example if you add Feedjit, Google Translator and Other links, your code will look like:
HTML1 -> Feedjit
HTML2 -> Google Translator
HTML3 -> Other links
This might be too technical for you, I just added this just in case... ^_^ Anyway, please don't hesitate to ask again if you have problems and I will help you with all my powers ^_^
Hi EditorPinoy,
Thanks a millions. My issue resolved and I am glad to find your blog... its sooo helpful.
Keep up the good work.
Thanks sharpmind! ^_^ Congratulations! ^_^
How to put Google Adsense within (inline) your Post
Finally, I did it!! (after sooooo many attempts and trial & erros!). I think there must be some errors in my html. Here is the best I could do www.360jewels.blogspot.com
Any recommendation of why I have the arrow "-->" in the middle of my navigation tab area? This is so strange. What do you say?
THANKS A MILLION! <3
Congrats Belle! ^_^
Try to look at the image of step number 6. Try to delete "-->".
Hope this helps ^_^
How to make rounded corners without images (one line code)
I deleted "-->" from step number 6 but it still didn't work :_(
I was trying to crack the code (eventhough I had no basics). I tried several things by guessing but I didn't succeed.
Try searching "-->" in your code and delete it. That should fix your problem ^_^
How to put Google Adsense below Post Title
Sorry Belle, what I mean is "-->" not "-->"
Hi! The tutorial, really helped me a lot!
I've been meaning to learn HTML, but it makes my head spin..LOL But it seemed easier after this. Thank you lots! XD
Hi my dearest EditorPinoy,
I searched for "-->" by Ctrl+F and found nothing similar or close to that. What should I do now? @L@
Hi fellow Kababayan Asseya!
Thanks for visiting! ^_^ Please tell your friends to visit my site if they wanted to tweak their blogs the easiest way =D
How to put or install Google Analytics Code in your Blog/Site
Hi Belle,
Can you please delete the code in step 6 just to see if "-->" is still there? Because if its still there then probably an unknown "-->" string is lying in your code.
Please take a look at the blogs of Asseya XD, JC Wagons and Montgomery Blair Sibley (people who commented on this post). They actually have no extra "-->" and I don't know why it happened to your site.
Hope this helps ^_^
How to setup/put/install Google Adsense for Search in your Blog/Site
Hi,
Thanks so much for posting this tutorial! But I have a question...I'm trying to add more tabs and the code that you posted isn't working for me :(
It's putting the link below the other tabs and not next to it. What should I do to fix it?
Hi Breeze,
Your welcome!^_^
Is the code working if you just put 1,2,3 or 4 tabs?
How many tabs were there when the code was not working?
I tried visiting your blog but unfortunately it can only be accessed by authorized readers.
I would like to add an "Older Posts" & "Newer Posts" link to individuals tabs, any ideas?
Thank you in advance.
Hi again,
I only got the inital two tabs to work, the Home and About me tabs. When I tried to add a third tab, the link appeared but it's not in the same tab format. I'll try send you a screen shot, so that it's a little more clear what I am talking about.
Oh my gosh,
Never mind, I figured it out. I have tabs, I'm so excited!!
Hi Breeze,
I am sorry that I have not replied to your query. But I am very happy that you have figured it out on your own ^_^ That is the beauty of tweaking your blog. Learning by trial and error is the a good way to get things done. Furthermore, you can even do more!
Congratulations! ^_^
Hello Diktat,
It seems that I have to look at the blogger code carefully about your query. I will reply to you as soon as I have the answer.
As my initial answer, I think making an "Older Posts" & "Newer Posts" links to individual tabs will be redundant because it is already embedded in your blog. Please see link below these comments and you will find links like "Create a Link", "Newer Post", "Older Post", "Home" etc. Plus you also have the archives widget. ^_^
Hi EditorPinoy, I have tried your method for 2 hours non-stop and ended up in despair T.T
I believe this method only works for the template designed by blogger only (default)? I have tried some of the styles and follow your steps exactly but still cannot give the result I want. Even I have tweaked everything, the result will still looks like "LinkList" without any tabs8.gif or circle.gif or tabsF.gif as my background. So is my template simply not compatible with this tweaking? Have a look at: http://premiumtricks.blogspot.com/.
Notice the Home, Tricks, Softwares and so on are the LinkList, not the CSSTabDesigner result.. Any HTML/JavaScript I made from CSSTabDesigner will look just like that.
Hi Daniel,
Sad to say you're right. If you are using customized templates, chances are that it won't show up correctly because it is already coded that way. For example as you have said it only showed a LinkList. Of course there is a way to fix that but it will take up much of your time considering that it is a customized template and you are not the one who coded it.
Scanner State 24 not Recognized
every time I try to do this.. I can build them.. I can get a code..
I can edit html..
then I get the above message
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Scanner State 24 not Recognized
I opened a brand new blog with nothing on it.. no widgets,, no posts, no followers... and I still get the same message.. If I have to remove all widgets from my blog to add this.. please tell me because I won't use it.. I've had my blog a really long time.
Hi The Queen,
Are you using any of the default blogger template or a customized template?
I was wondering if you could direct me to where I can get a break down of step 5 for a newbie. Thank You.
Instead of adding the CSS code in the HTML code. I find it easier to add a new HTML gadget and paste the CSS code in it.
Hi PJ,
Actually its already broken down.hehe Anyway just go to "My Computer" and locate the files mentioned above in this directory.
"C:\Program Files\CSS Tab Designer 2\styles\Tab Menu 8"
and continue the steps above.
Hi BFM,
you can also do it that way.
Its just that I wanted to put my CSS in the HTNL code and put my "Tabs" code in a HTML gadget.
Hey EditorPinoy !
Just wanted to say thank you very much for this tutorial. After hours of testing, this is what actually worked for me, so now I have a pretty decent menu tab ^^
However, I have a question. I have set my blog to have a static homepage, but I still need a page to post my updates too, as I will post at least weekly news. Do you have any idea how that can be done? Sincerely thanks!
my blog, in case the link in my nick doesn't work:
TVXQ CASSIOPEIA SCANDINAVIA
By the way
i am using an old blog to test the layouts etc, All i need is to add a tabbed navigation bar in.
the blog i am using is a customized blogg template. I have added the background in and banner, i haven't altered any type of page element aside from the tutorial before this one on your site
Dutchboyzent.blogspot.com
apreciate your help
i can't get past step 11
when i press save template it says
the content of elements must consist of well-formed character data or mark-up
Help??
Hey, Could you help me? I'm trying now your steps, but after I did the 5 to 12 steps, I get this massage:
"We were unable to save your template
Please correct the error below, and submit your template again.
Invalid variable declaration in page skin: Variable is used but not defined. Input: startSihttp".
What should I do?
Ups, I tried it again and it worked, meaning no error message but when I opened the blog's page there was a blank image only. Nothing else. I am lost!
I have it on my page at the bottom for testing right now as I'm having trouble with it... Site is http://brandontward.blogspot.com... Here is the trouble..
I am using IE8 and if you look at the "Home" button for example. You can see a blue box right outside the Home. It's shaded darker towards the top and lighter on the bottom. Then the main part of that button, the shading is the opposite. It’s supposed to blend in real nice..
If you highlight biblical resources there is a white break in the line too...
I know the links are not working because have no pages linked there. That's not the issue. The appearance is..
I have been tryin to figure this out for days. Help please?
Hi Brandon,
I just checked your site and it looks perfect.
I assume you fixed it already.
Hello, I have added the tabs but I see no buttons and only the tabs. Also, I am not able to put the one beside the other.
Thanks
my blog is
http://lescreationsmichelle.blogspot.com/
Hi Michelle,
Since requires changing the code in many places, please try to make sure to follow the steps above in order. Follow the steps slowly.
Post again if you still have problems...
is there a way to center the tabs?
AFTER I WAS DONE, I WAS ABLE TO SEE THE TABS BUT I ONCE I CLICK ON THEM IT GIVES A MESSAGE "THE WEB CAN NOT BE FOUND"
CAN YOU PLEASE HELP ME
THANK YOU
I noticed these posts were awhile back... I need help regarding my html coding... my blogger says it can not save it. I have followed all steps. Please e-mail me at Beckott@yahoo.com if you still check this. Thank you.
I'm having trouble! My tabs look funky....they're not really defined well:
http://noteasytobecreative.blogspot.com/
Excellent !!!
I have similar problem with BELLE when trying to upload a new blogger template. I got this error : (SyntaxError) number: -2146827286 description: Syntax error: Syntax error blogger.
Anyone know how to solve it?
My blog is : http://digita7seven.blogspot.com
Post a Comment