Saturday, November 15, 2008

Adding Tabs in Blogger: A Few Sites to Try

In case anyone is wondering, it is possible to have tabbed pages in Blogger. Is it as easy as I would assume it would be in WordPress, where you can presumably just add the pages from your dashboard? No. You have to create static pages first by writing a post with the information that you want on the tabbed pages (About Me, Contact, etc.), change the date on those posts to a date that is before your first post so that it won't show up on your RSS feed or, if it does, it won't be your newest post, and publish the posts. Then, if you're like me and have never read HTML or CSS for Dummies, you have to spend hours searching for directions on how to create the tabs on the Internet and trying each set of directions until you find the look you want.

From what I found out when I ventured into the tabbed arena earlier in the week, there are three different ways to display the About Me, Contact, and similar pages on a Blogger blog. You can have a horizontal, tabless list of words that link to the static pages; a horizontal list of images that link to them; or tabs like I have. I'm not going to tell you how to do each of those things. I'm scared that I'd screw it all up if I tried. Instead, I'm just going to suggest a few sites that I found: Tips-for-New-Bloggers.blogspot.com (specifically, two posts entitled Add Navigation Bar in Header Image and Horizontal Menu and Navigation Bar), Blogdoctor.me, BloggerBuster.com, and Bloggingtips.com.

To get tabs like mine, follow the directions in Blog Doctor's "Free CSS Navigation Menus in Blogger" post. You'll have to download the images for the tabs from Exploding-Boy.com. Don't worry. They're free. I wouldn't have used them otherwise. Just look for Exploding Boy's similarly titled post, "Free CSS Navigation Menu Designs," when you go to his web site.

A word of advice though from someone who had to find this little tidbit out through trial and error. If you alter the color of the tabs in Photoshop, Paint.net, or some other paint program, do not make the vertical image horizontal before you upload it to Photobucket or another online photo-sharing program. Intuitively, you would think that you're supposed to because the tabs are horizontal on your blog, but apparently the CSS language that Blog Doctor has set up somehow compensates for the vertical position. You should, however, leave the horizontal image horizontal.

Tomorrow I'm going to try to add similar tabs to my fan fic site. Hopefully, it will only take a half hour this time instead of half a day like it did earlier in the week when I added them to this site.


(UPDATED 3/5/09: THIS POST NOW INCLUDES DIRECT LINKS TO THE ARTICLES THAT TELL YOU HOW TO ADD TABS. JUST CLICK ON THE BLUE TEXT. ALSO, JUST TO LET YOU KNOW, I HAVE SWITCHED FROM TABS TO A NAVIGATION BAR FOR THOSE OF YOU WHO ARE WONDERING WHERE THE TABS WENT. I FOLLOWED THE DIRECTIONS IN TIPS FOR NEW BLOGGERS.)
blog comments powered by Disqus
Related Posts Plugin for WordPress, Blogger...