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!

15 responses to “Customizing my blogger blog”

  1. Ok… You are amazing and your blog looks fantastic! I’ve always wondered how to get the split sidebar… may have to implement that when I find a minute.

  2. This is a fantastic post! I don’t have any ideas to share because I am new to the blogging world, but I am eating your suggestions up – they’re great! I think your blog looks amazing and I might try to incorporate some of your suggestions into mine if you don’t mind. Thanks so much!
    http://www.freakedoutnsmall.blogspot.com

  3. Meg says:

    thanks for all the info stacie!! i will most definitely be using some of those tutorials. i’m anxious to redesign my blog!!

  4. RachelDenbow says:

    This was great, Stacie! Thanks for making custom designs a little less scary! 😉 Your blog looks great by the way.

  5. I love that you did this post! I have been humming and hawing lately about a mini makeover for my blog, and now I know where to start!

    Thanks!!

  6. Gingiber says:

    I’m on a lunch break, so I wanted to say YAY to all of you who are finding these tutorials helpful! I cannot wait to see what everyone comes up with in their Blog Makeovers!

  7. Artsy Momma says:

    These are great links. I like to dabble in my own blog updates but I am terrified I will totally mess it all up! Love the comment bubble!

  8. Erin says:

    I love all this info you shared. I’m loving your new look too!

  9. Gingiber says:

    Artsy Momma, I love to dabble with my blog design. I always back my template up before I make any changes, just in case I totally mess it up (which has happened). I love the comment bubble too!

    Erin, thanks for the blog love! I am glad you like the new design! I hope that the info is helpful!

  10. Tree says:

    Love the multi-tabbed widget! I’m using it now. Thanks for the info! 🙂

  11. Gingiber says:

    Tree! So glad that you found the multi-tabbed widget helpful!

  12. Rebecca says:

    Thank you so much for sending me the link to these tutorials… have put them to use 🙂

  13. vita says:

    On this page, you’ll find great tips on delta bathroom faucets. Offers a single source on delta bathroom faucets related issues
    http://www.delta-bathroom-faucets.com/delta-bathroom-faucets.htm

  14. Moriah says:

    Awesome tips! Thanks so much. I’m planning a huge revamp of my blog and have been trying to figure out how to make it more organized. I absolutely love your tabbed sidebar!

  15. Kim says:

    I love your tips so much I featured it on this weeks weekend links on my blog! Check it out! http://Www.themadething.blogspot.com

Leave a Reply

Your email address will not be published. Required fields are marked *