With Spring in the air it is only natural for us to feel the need to clean out house, get rid of the winter dust and get everything organized!
Have you ever thought about giving your blog a good spring cleaning? I highly recommend it! Schedule a few minutes to take a good look at your blog.
Look over your sidebar and take down any extra or irrelevant widgets. Maybe even think about switching the order of your sidebar content. Keep things fresh and you will keep your readers!
Once you have gotten rid of any extra clutter you can use these two easy tips to make sure all your sidebar content is nice and centered.
Tip #1. Center all the buttons/widgets in your sidebar
To do this open up each of your html widgets. Add <center> at the beginning of the code and </center> at the end of the code. Here is an example….
[click on image to view larger]
Pretty simple right? And this works whether you have blogger or wordpress!
Tip #2 – Manually Adjust Widgets
Sometimes even when you “center” a gadget [using the html above] it still isn’t exactly in the middle of your sidebar. Anyone have that problem before?
Look at the image below….See how the “welcome” note is not in the center of the sidebar. That is because of the “padding” that is built into the blog template.
Instead of changing the padding for the sidebar [that can be a little tricky] I think it is easier to move the individual widget. In this case I want my welcome note image to be moved to the left, in the center of my sidebar column. Here is how to fix that….
Go into the Design Tab > Template Designer > Add CSS.
Then you are going to paste this:
#HTML1 {margin-left: -17px;}
You will need to make a few changes to the code above for your specific widget….. First, you need to identify your widgets’ ID – go to Design > Page Elements, and mouse over the specific gadget’s Edit link. The widget Id can be read on the browser’s status bar. Example widgetId=HTML3 will be referred to #HTML3 in the CSS.
You can change the word left to top, bottom, or right, depending on which way you want to move the widget. And of course you can change the number to whatever number you need [positive or negative].
If you want to move you widget in two directions, say up and to the left, you would just add the second command. Like this….
#HTML1 {margin-left: -17px; margin-top: 10px;}
Ta-Da! All centered!
Hopefully these two tips will help keep your blog looking clean and organized! Have a Happy Tuesday!
Kristin says
March 13, 2012 at 12:25 pmThanks for this post Kendra! I always love free advice when it comes to HTML code. I usually just glaze over when I hear conversations about code since I just don’t understand how it all works. Your advice is super simple. I know I can totally do it.
I am actually looking to clutter up my blog a little more. I have been family blogging for years, but just started my new professional blog at the beginning of the year. I’m finally piling up enough content to make it interesting. Now I need more widgets and ads and other peices of flare.
Thanks agian for your advice.
Kendra says
March 14, 2012 at 1:34 am@Kristin
I am glad that my tips were helpful for you! Yes, HTML can seem a little intimidating at first but it only takes some practice and learning to make a few cool changes! 🙂 … Off to check out your blog now 😉
Sharon says
March 26, 2012 at 4:33 amGenerally I do pretty well with code, and always do the redesign my own blogs, but it’s always good to have little tips like this to make things easier! Thank you, Kendra : )
Jvsky says
April 12, 2012 at 4:30 amthis really helped me improving my blog! thanks kendra!
Amy @ Maker Mama says
May 13, 2012 at 8:28 pmThanks! I found this tutorial very helpful–the manual adjust instructions worked like a charm!
Tauni says
May 14, 2012 at 3:16 pmAmy, glad you found the tutorial helpful! Have a great day.
xoxo
Tauni
Danette Dillon says
May 21, 2012 at 9:30 pmThis helped so much. Thank you, thank you, thank you!
MaryBeth says
November 7, 2012 at 1:08 pmTHANK YOU!
xoxo
MB
Tauni says
November 14, 2012 at 7:53 pmYou’re welcome MaryBeth 🙂
Jp says
November 19, 2012 at 10:08 pmThanks, Kendra. I now have new knowledge. 🙂
Kristen says
August 18, 2013 at 7:38 pmUgh, I spent three hours last night going through google suggestions for how to do this & yours is the first one that actually worked! THANK YOU!
Tauni says
August 18, 2013 at 8:58 pmKristen, Glad you got your sidebar widgets taken care of. xoxo Tauni
Paula @ Vintage Kitchen Notes says
October 4, 2013 at 6:50 amThanks! this was very helpful!
Tauni says
October 4, 2013 at 8:15 pmGlad the tutorial worked for your Paula. Happy blogging. xoxo Tauni
Shan says
January 26, 2014 at 10:40 pmThank you!!! You made it finally “click” for me! How do I adjust the width of my archives drop down box to match the width of my sidebar titles?
Tauni says
January 28, 2014 at 10:51 pmHi Shan, I see you’re on a blogspot address. Unfortunately, if you’re using the standard widget, you can’t actually change the width in Blogger. You could code a box, but that’s a lot of effort…Good luck! Tauni
casper joe says
September 17, 2014 at 8:11 amwow i am so happy abt this thank u so much
Julie says
March 3, 2015 at 11:58 amI have been searching high and low trying to figure out how to fix just one widget in my blogger sidebar with this problem and couldn’t find help anywhere. Thank you so much for posting!!
Keisha - Cupcake Wishes & Birthday Dreams says
March 7, 2016 at 11:05 amThis was so helpful! Thanks, Tauni for sharing!
Meghan Mulcahy says
March 4, 2018 at 6:37 amThank you so much for the help!