Tauni Everett

Bibbidi Bobbidi Chew

Tauni Everett » Business + Productivity » Blogging » Top Blogging Tips » Centering Blogger Sidebar Widgets

Centering Blogger Sidebar Widgets

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.

Center blogger sidebar widgets1 1024x561

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]

Capture 276x300

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….

Capture2 1024x457

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!

about me
post summary
Popular Posts


Snap

Snap

Editor at Tauni Everett
Snap has contributed 472 articles on https://taunieverett.com since October 2, 2012.

Power Bio Box by Zyra Console



You are here:
Home
Business + Productivity
Blogging
Top Blogging Tips
Centering Blogger Sidebar Widgets
Title:
Centering Blogger Sidebar Widgets

Authors:
Categories:
Mentions:
Blogger, Blogging Tips, Sidebar, Tutorial

Keywords:
Not Specified

Last Updated:
December 13, 2018

Comments

  1. Kristin says

    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.

    • Kendra says

      @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 😉

  2. Sharon says

    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 : )

  8. Kristen says

    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!

  10. Shan says

    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?

    • Tauni says

      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

  12. Julie says

    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!!

WordPress Hosting by House of Ideas