January 19, 2011

Customizing my blogger blog

Hi! As you may have noticed (or maybe you haven't clicked on my blog in a while if you read my blog in a reader) but the GingiberSnap blog has been getting a wee bit fancy, and I thought that I would share with you some great resources and tutorials that have been quite helpful during this transformation! Maybe you will decide to try out a tutorial or two on your own blog! Here are some of my favorite new elements on the blog:

1. Comment Quote Bubble 

I used this great tutorial over at BloggerStop to learn how to add my own customized comment quote bubble in my blog post title header. They give extremely clear step by step directions on how to go into your blogger design, select the HTML code, and add 2 sections of code in order to achieve a custom comment bubble. I designed my own custom thought bubble using Adobe Illustrator and used it instead of the stock thought bubbles that are available at BloggerStop.

I think the greatest advantage of having a comment bubble at the top of each blog post is that it encourages readers to leave a comment if they see that other people have already left a comment. As the comment bubble is in the Post Title, people may decide to keep on reading just because they see the number of comments first thing (Just a theory, but ever since I added this element, my comments have increased a wee bit!).

2. Highlight Author Comments

Have you ever left a comment on someone's blog, and then check back periodically to see if the blog author has responded yet? Maybe it is just me, but I am always anxious to see what the author has to say in the comments section. Using the Highlight Author Comments tutorial from BloggerBuster, I learned how to customize my HTML code so that anytime I reply to a reader's comment, it is has a blue box surrounding it! I really love this element! And I color coordinated it with my custom thought bubble! 5 points for color coding!

This is a simple, clean design element that adds a bit of professional touch to any blog. And it makes having a conversation within a blog post a heck of a lot easier to keep track of!

3. Adding a Stacked Sidebar on top of 2 Smaller Sidebars

I have seen a lot of blogs using what appears to be a large sidebar on top of 2 sidebars. This can be useful if you plan on displaying advertisements, blog buttons, or other page elements, such as blog archives or a tabbed navigation sidebar box (the latter which I will explain soon). I followed this quick and easy tutorial from Things We Love to Hate.

This tutorial is AMAZING because it shows you how to go from having a single sidebar, to a double side bar, to having 3 sidebars! It also is helpful in explaining the some simple HTML words, like margins, padding, width attribute, etc. 

4. Adding a Multi Tabbed Widget for Blogger Sidebar

 One of my biggest struggle with blog design is keeping things clean and organized visually. I tend to want to add too many elements, thus making it hard for readers to navigate! So I have long been a fan of the Multi Tabbed Widget that I have seen on many WordPress blogs. This element comes built in to certain WordPress templates, but alas, Blogger has not yet integrated this widget into their blog layout options.

So I began searching for tutorials, and settled on this Advanced Multi Tabbed Widget Tutorial from My Blogger Tricks.

Please note that this tutorial involves a bit of JavaScript (something I am not all that familiar with) but it is explained beautifully! This widget allows you to to put widgets that would normally be located on your sidebar, such as archives (which normally take up loads of space) topics, blog search, etc. and place them in an organized box. When you click on each tab, the size of that particular tab changes in height depending on the amount of content.

This is quite possibly my favorite new blogger element! I think that for a reader, most of the pertinent information about the blog is front and center.

So there you have it! Do you dabble in blog design? What are your favorite blogger tips and tricks? Please let me know what you think of this list, and share your favorite blogger hacks as well!