Thursday, January 28, 2010

ON BLOGGING ~ Keeping Tabs...



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)

    13 comments:

    Matty said...

    I have always wondered how people did this. I don't have time to try right now, but I will come back to this post and see how I make out with it. I am very technically challenged, so the challenge will be to see if I can do it. If I can, then I'll be able to say that if I can do it, anyone can. Catch you later.

    jehara said...

    great post! i just recently put in a navigation bar on my blog, which is similar to tabs. i love it. i do like the look of tabs so i may switch it. if i decide to i will know where to go for my instructions. :)

    Susan said...

    Thank you, thank you! I have wanted to do this forever! Of course, it will take "forever" for me to follow all that HTML stuff! :D But I will do it...someday when I have LOTS of time!

    Your tabs look great! You should charge for this, but not me! ;)

    McGillicutty said...

    YAY... this will be my new weekend project and I'll let you know how I do. Thanks so much, I'm always looking for new ways in which to improve my site. You rock!!!!!!

    Teddyree said...

    OMG how awesome, I am absolutely going to give this a go in the next day or two. Fingers crossed, I'll be back to tell you how sucessful it's been LOL.
    Thanks for the generous advice :-)

    Diane said...

    AWESOME Job. I'd love to try this but I'm a bit chicken. Maybe i will play with a test blog at some point. Thanks for the helpful post!

    Kaye said...

    Once I get up the courage, I'd like to try this on a test blog. Thanks for posting this.

    J. Kaye said...

    This is such a great post! Luckily, I have Steve who has been forced into Blogger slavery when I want an update done. But many don't have that. ;) Cool that you are giving these helpful techniques to help others. It is really needed!

    Sandy Nawrot said...

    OK, so now I have to do this, don't I? No excuses? Can I just bribe you to do mine by sending you wine or something? When I get some time, I'm going to come back here and do it. Really truly. (Thank you!)

    Sheila said...

    Wow! Not only do the tabs work, you tell us how to do it! I'm going to mark this for when I have an oppportunity to try it out. And BTW great intro picture to go with it.

    DelGal Reviews said...

    I tried it and even figured out how to tweak it to my blog. Thank you for helping me start it out! I'll have to come back for more tips, keep it up :)

    Catherine @ The Blonde Diaries said...

    I love the tabs. I'm on Wordpress otherwise I'd be working on this tutorial over the upcoming weekend. I need to do a search and find the Wordpress equivalent.

    Ashley Ladd said...

    Yay! I finally buckled down and got tabs on my blog thanks to you. This was my third attempt and this time I wasn't going to give up.

    I'm doing the happy dance. :)