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!
I may just be weird.