Semper Renovet: Tabbed Sidebar Widget

First things first: AHHHHH! My plumbing pipe light fixture was featured over on Babble.com – 18 Gorgeous DIY Light Fixtures.  With Mandi of Vintage Revivals and Sarah of Sarah M. Dorsey Designs, two fab bloggers who awe and inspire me and who I have a huge blogger-crush on!  So thrilled! *Sigh.* Coming back down to earth…

If you don’t remember from this post, “Semper Renovet” is my unofficially elected new family crest/motto.  Google translate told me that it means “always renovating”, which is an apt description of both my hobby and my personality. 

(Sidenote: if you are versed in Latin and know that the phrase I am using actually means “always gullible” or anything else other than “always renovating”, would you be a dear and save me further embarrassment?  Thank you.)

Never one to leave well enough alone, I am always looking for ways to upgrade, update, and prettify this blog.  So I decided that I needed a tabbed sidebar widget.  If you don’t know what that is, don’t worry – I didn’t either.  Until I saw one on my friend Trisha’s blog (Black and White Obsession) and came to the sudden, desperate and life-altering realization that my life would not be complete until I too had a Tabbed. Sidebar. Widget.

And because I am stubborn and broke and have an inflated opinion of my technological acumen, I decided to try to make one myself.

What follows is a lot of blog-html-mumbo-jumbo, so, fair warning. If you are easily distracted (I know I am!) or bored to tears by technical-speak, or are a confirmed and devout luddite (why are you on a computer, anyway?) feel free to move your mouse over to my new widget on the side there and have fun clicking through the four (FOUR!) different tabs. 

Mobile readers: you’re missing out.  Click over.  We have cookies.

Bloggers, you will want a basic vocabulary of html and some CSS before you attempt this, and I can’t recommend Code Academy highly enough to get you started!

This was a much more frustrating endeavor for me than it needed to be, mainly because I tried around seven or eight different tutorials before finding one that a) actually worked, and b) had code that I could customize to fit the vision in my head.

Ladies and gentlemen, let me share the winning tutorial:  Stylish Multi-Tabbed Widget for Blogger via The Wild Blogger.

If you are interested in creating and installing a similar widget on your Blogger blog (I am sure there are also tutorials out there for similar WordPress widgets), I will let you visit that link and follow the detailed steps to insert the code into your html template.

Always back-up your template before you start messing with it. Always. I copy the entire template and paste it into a new notepad document.  I ended up restoring from my backup at least five times the other night while poking around to find a working widget!

One MAJOR issue I ran into was following the last step of the tutorial.  You are instructed to find <div id=’sidebar-wrapper’> and insert the last bit of code right beneath it.  Only I couldn’t find it, for the life of me.  It didn’t exist in the Blogger template I was using.  By dint of much research, I managed to ascertain that the code needed to go right beneath <div class=’column-right-inner’>.  So just a little heads up, if you have similar trouble figuring out where to paste the last bit.

Once I had finally installed the widget and added my gadgets to each tab (this is also kind of a bear because you have to uninstall gadgets like “blog archive” and “labels” and reinstall within the new widget tabs), it was time to dive into the making-pretty side of things.  If you visit the section of code within the <b:skin> section of your template, you will find everything you need to prettify your new widget using a little CSS knowledge! Here are some ideas:

• Change the widget’s width to fit your sidebar (leave a little space on each side as well).
• Adjust margins inside the widget (here’s a good intro to CSS margin properties)
• Customize the widget’s border (Do you want a solid line? dotted line? no border? What color?)
• Customize the widget’s shadow
• Change tab colors (here are some handy color hex charts)
• Play around with font-sizes and font-families – I installed Google’s “Cookie” font following the instructions here, but Google has tons of other lovely web fonts available!

I will admit that I did a fair amount of this by trial and error, but everyone has to start somewhere, right? 

The moral of the story is if I can muddle my way through it, so can you!

It’s fun!

I may just be weird.