You wanted tabs, I’ve found you tabs. If you are on Blogger that is. Since I don’t use WordPress for a personal platform I don’t have a way to test those out. But I spent a few weeks poking around online and tried out a few different scripts for Blogger and think I have found an easy to follow guide with simple steps requiring little work on your part, resulting in visually pleasing and functional tabs - as evidenced by our updated look above! It would be easy for me to just point you to the link
here and send you on your way to Markandey's Blog, but
I promised to be a helping hand by sharing the things I learn. So here is a Bumbles interpretation of how to add tabs to your Blogger blog. Please realize that there are really only SIX STEPS to adding the tabs into your blog’s template. It just looks more complicated because I have tried to spell every little piece out for you. Don’t run away. All you need to know how to do is scroll, copy and paste. Promise.
BACKUP:
First, you should always make a backup of your blog’s template before making any modifications. You may even want to create a Test Blog to play around with. This is the piece that we will be modifying to add the tabs so you will want a copy of how it is now in case you don’t like the tabs look or encounter any problems. Then you can just restore this original copy.
Go to your Dashboard and click on the Layout tab
Click on the Edit HTML link
You will see the Backup/Restore Template option at the very top
Click on the Download Full Template link
When the File Download box opens, click Save
When the Save As box opens, select a location to save your file (Desktop is easiest if you are unfamiliar with file folders and drives) and click Save
An alternative is to just copy and paste your template’s HTML into a Word document. This is a simple way of making a temporary copy of just the HTML script for easy access in case you want to put it all back the way it was without going through a full restore. If I were you, I would do both.
Go to your Dashboard and click on the Layout tab
Click on the Edit HTML link
Under the Edit Template section you will see a big scroll box with a bunch of HTML gibberish inside of it
Do NOT run and hide! Remember our Gator Aid lesson on basic HTML? That was to get you familiar with the look of HTML and understand the purpose it serves. You don’t need to know anything about how HTML works or what it means for this process. You just need to not be afraid of what it looks like ;0)
Put your cursor anywhere inside that box
Hold down the Control key and the A key at the same time (this will Select All - highlight the entire text)
Hold down the Control key and the C key at the same time (this will Copy everything you just selected)
Open a new Word document
Place your cursor in the new Word document and hold down the Control key and the V key at the same time (this will Paste everything you just copied)
Save the Word document naming it something clever like “Template Script”
ADD TABS:
Staying in the Edit Template section with that big scroll box of HTML gibberish inside of it, find the “Body” section
On my template, there is a bunch of gibberish at the top. Then there is plain English that tells me the name of my particular Blogger Template Style. Then the first section is titled “Variable Definitions.” At the end of that section is what I call the Body section that looks like this:
body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
Yours may contain different lines and symbols in it, but it should start with body and end with that fancy bracket symbol
Put your cursor directly after that fancy bracket at the end
Now come back over here and highlight all of this mess below. Don't read it. Don't fear it. Just highlight it:
#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://hackbit.googlepages.com/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://hackbit.googlepages.com/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;
}
Now hit Control & C to copy it
Go back to your blog and (making sure that your cursor is still in the Edit HTML box, after the fancy bracket like I mentioned above) hit Control & V to paste the mess in there
Now scroll down farther through your template HTML and find the following code - for me it is way down near the bottom:
<b:widget id='Header1' locked='true' title='The Bumbles Blog (Header)' type='Header'/>
</b:section>
Yours should look the same except it will have your blog’s name in it. We have several “b:widgets” but only one that says Header within it. That’s how I knew it was right
Put your cursor directly after </b:section>
Now come back over here and highlight all of this mess below:
<div id='tabsB'>
<ul>
<li><a href='http://SITE YOU WANT TO LINK TO' title='TAB NAME'><span>TAB NAME</span></a></li><li><a href='http://SITE YOU WANT TO LINK TO' title='TAB NAME'><span>TAB NAME</span></a></li><li><a href='http://SITE YOU WANT TO LINK TO' title='TAB NAME'><span>TAB NAME</span></a></li><li><a href='http://SITE YOU WANT TO LINK TO' title='TAB NAME'><span>TAB NAME</span></a></li><li><a href='http://SITE YOU WANT TO LINK TO' title='TAB NAME'><span>TAB NAME</span></a></li><li><a href='http://SITE YOU WANT TO LINK TO' title='TAB NAME'><span>TAB NAME</span></a></li><li><a href='http://SITE YOU WANT TO LINK TO' title='TAB NAME'><span>TAB NAME</span></a></li>
</ul>
</div>
Now hit Control & C to copy it
Go back to your blog and (making sure that your cursor is still in the Edit HTML box, after </b:section> like I mentioned above) hit Control & V to paste the mess in there
Click the Save Template Button and go look at your blog
You should see tabs along the top all named TAB NAME
If you don’t - something didn’t work correctly. Go back to Layout, Edit HTML, highlight everything in the HTML box, hit Delete. Then go highlight everything in your saved Temp Script document, copy it, and paste it in your blog’s Edit HTML box. Hit the Save Template Button and go look at your blog. It should appear the way it was before you started. Then you can go try to edit it again.
NAME TABS & CREATE LINKS:
Go to your Dashboard and click on the Layout tab
Click on the Edit HTML link
Under the Edit Template section scroll through your HTML Box and find the Tabs script you added near the bottom
Replace the SITE YOU WANT TO LINK TO words with the actual link address to the page within your blog, or other website, that you want the tab to point to
Replace the TAB NAME words with whatever you wish the tab’s name to be
Repeat this for each line, in the order that you want the tabs to be seen from left to right across the top of your blog
The tabs just act as links to other pages so you will need to create a page to hold the information you want to be viewed via the tab. In our case, we told the tabs to point to the Labels for our posts. In other words, we clicked on our Monday Movie Meme label in our side bar and copied the site address for “All Monday Movie Meme Posts” into the tab script.
Click the Save Template Button and go look at your blog
Your tabs should now have your own names and when you click on them they should point to the pages you selected.
Please let me know if you had success! And if you ran into trouble, got tripped up by something and became frustrated - let me know (send me an e-mail, see our About page). I am happy to insert the code into a Word copy of your blog’s template - but only if you have given it an honest college try yourself. That’s the teacher in me ;0)
