• Business + Productivity
  • Creative Projects
  • Recipes
  • Travel
    • Disneyland
    • Facebook
    • Instagram
    • Pinterest
    • Twitter

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!

Related Posts

Add Your Instagram Photos to Your Blogger Sidebar

Add Social Icons to Your Sidebar


How to Offer A Free Printable in Blogger


How To Truncate Posts in Blogger


Day one as a Blogger


DIY Blogger House


Spring Blogger Home Tour 2022

Author Bio
Article Info
Popular Posts
Snap

Snap

Editor at Tauni Everett
    Author Bio Box by HOI
    Author:
    Snap
    Categories:
    • Blogger
    • Blogging
    • Top Blogging Tips
    Mentions:
    Blogger, Blogging Tips, Sidebar, Tutorial
    Keywords:
    Not Specified
    Last Updated:
    December 13, 2018
    • Show + Tell 318
    • Show + Tell 317
    • Show + Tell 316
    • Show + Tell 315
    • Show + Tell 314
    • Show + Tell 313
    «
    »

    Blogger, Blogging, Top Blogging Tips 22

    Comments

    1. Kristin says

      March 13, 2012 at 12:25 pm

      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.

      Reply
      • 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 ๐Ÿ˜‰

        Reply
    2. Sharon says

      March 26, 2012 at 4:33 am

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

      Reply
    3. Jvsky says

      April 12, 2012 at 4:30 am

      this really helped me improving my blog! thanks kendra!

      Reply
    4. Amy @ Maker Mama says

      May 13, 2012 at 8:28 pm

      Thanks! I found this tutorial very helpful–the manual adjust instructions worked like a charm!

      Reply
      • Tauni says

        May 14, 2012 at 3:16 pm

        Amy, glad you found the tutorial helpful! Have a great day.

        xoxo
        Tauni

        Reply
    5. Danette Dillon says

      May 21, 2012 at 9:30 pm

      This helped so much. Thank you, thank you, thank you!

      Reply
    6. MaryBeth says

      November 7, 2012 at 1:08 pm

      THANK YOU!
      xoxo
      MB

      Reply
      • Tauni says

        November 14, 2012 at 7:53 pm

        You’re welcome MaryBeth ๐Ÿ™‚

        Reply
    7. Jp says

      November 19, 2012 at 10:08 pm

      Thanks, Kendra. I now have new knowledge. ๐Ÿ™‚

      Reply
    8. Kristen says

      August 18, 2013 at 7:38 pm

      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!

      Reply
      • Tauni says

        August 18, 2013 at 8:58 pm

        Kristen, Glad you got your sidebar widgets taken care of. xoxo Tauni

        Reply
    9. Paula @ Vintage Kitchen Notes says

      October 4, 2013 at 6:50 am

      Thanks! this was very helpful!

      Reply
      • Tauni says

        October 4, 2013 at 8:15 pm

        Glad the tutorial worked for your Paula. Happy blogging. xoxo Tauni

        Reply
    10. Shan says

      January 26, 2014 at 10:40 pm

      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?

      Reply
      • Tauni says

        January 28, 2014 at 10:51 pm

        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

        Reply
    11. casper joe says

      September 17, 2014 at 8:11 am

      wow i am so happy abt this thank u so much

      Reply
    12. Julie says

      March 3, 2015 at 11:58 am

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

      Reply
    13. Keisha - Cupcake Wishes & Birthday Dreams says

      March 7, 2016 at 11:05 am

      This was so helpful! Thanks, Tauni for sharing!

      Reply
    14. Meghan Mulcahy says

      March 4, 2018 at 6:37 am

      Thank you so much for the help!

      Reply

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Recipe Rating




    Featured Posts

    Moderate Value Disneyland Area Hotel

    Moderate Value Disneyland Area Hotel for Large Families

    Anaheim Marriott Hotel Review 1

    Anaheim Marriott Hotel for Disneyland Guests

    Courtyard Marriott Best Hotel within Walking Distance to Disneyland for large families

    Best Hotel in Walking Distance of Disneyland for Large Families

    Best Value Hotel Within Walking Distance of Disneyland

    Best Value Hotel Within Walking Distance of Disneyland

    WordPress Hosting by House of Ideas

    Copyright © 2022 SNAP! Creativity · Design by: Key Lime Digital Designs· Darling Theme