I am so happy to have Kendra with us today! She is full of great knowledge when it comes to blogging and design.
You will definitely want to read what she has to say.
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! 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!
Thanks Rachel for having me!! :)
Thank you so much for stopping by Kendra!
For anyone interested in a new blog or freshening up your existing one, contact Kendra. She does great work!
Oh yay! I have been wondering how to move my widgets!!
ReplyDelete