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!
Thanks 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.
@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 😉
Generally 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 : )
this really helped me improving my blog! thanks kendra!
Thanks! I found this tutorial very helpful–the manual adjust instructions worked like a charm!
Amy, glad you found the tutorial helpful! Have a great day.
xoxo
Tauni
This helped so much. Thank you, thank you, thank you!
THANK YOU!
xoxo
MB
You’re welcome MaryBeth 🙂
Thanks, Kendra. I now have new knowledge. 🙂
Ugh, 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!
Kristen, Glad you got your sidebar widgets taken care of. xoxo Tauni
Thanks! this was very helpful!
Glad the tutorial worked for your Paula. Happy blogging. xoxo Tauni
Thank 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?
Hi 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
wow i am so happy abt this thank u so much
I 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!!
This was so helpful! Thanks, Tauni for sharing!
Thank you so much for the help!