Thursday, February 7, 2013

Blog Design Help: How to Center Post titles, Dates, Gadgets, and Tabs in Blogger

One of the greatest things I have loved for my blog design is being able to center the gadget titles, post titles, date, and tabs on my blog.  There's just something more appealing about the look and feel of my blog when it's all lined up nice and pretty with the center of the page.

Tutorial: How to Center your Gadget Headers, Post Titles, and Tabs in Blogger.
    

Here is a quick and easy tutorial on how you can center all of these things on your blog as well, and do it all through the basic Template editor in Blogger.  We're just going to add some simple coding to the CSS section in the Template Designer.

How to get there:
  1. Log into your Blogger account and then click on your blog name
  2. Go into the Template section on the left
  3. Then click the orange Customize button
  4. Then go to the Advanced section on the left
  5. Scroll down to Add CSS
Once you are in there, you're going to want to add the following codes.  Simply copy/paste (or type) them into the Add CSS field, and then hit enter between each one.

Code to center your Post & Date Titles in Blogger:

.post-title {
text-align:center;
}

.date-header {
text-align:center;
}

Code to center your Gadget Headers in Blogger:

.widget {
  text-align: center;
}

 Code to center your Tabs in Blogger:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

You can also leave out any of these you want, and just pick and choose which things you want centered and which you do not.  If you leave one out, that section will just remain with the basic Blogger settings.  

48 comments:

  1. Tried adding the centre post titles and the centre tabs but the tabs one didnt work.
    When I go back to the add css part only the code for the post title is there, the tabs one disappears. Do I need to add something in between them or something?

    ReplyDelete
    Replies
    1. I always hit enter after pasting, and then enter again so there's a space break between the two codes. See if that helps!

      Delete
    2. Hi @Miss Angie, I just one to center one of the post titles in my blog, not all of them. Do you know how to do this? Thanks

      Delete
    3. Hi Edwar, unfortunately I'm not sure that is possible, since Blogger doesn't seem to have a way of individually altering titles, only all titles for the entire blog.

      Delete
  2. thank you for this can i ask when you reply to a comment here on your blog do you do via email or right on your blog

    ReplyDelete
  3. Look at you sharing your knowledge. See, yet another reason you are a gem! :)

    You did this to mine huh... all my stuff centers now, I just noticed that this evening.

    ReplyDelete
  4. Can you make this a series, where you give a techie blog tip every week? I've been trying to change the font of my blog titles, and I found a tutorial to help me, but it was too difficult for my little brain! Help!

    ReplyDelete
    Replies
    1. I need to do more of these! I love my New Blogger Series!

      Delete
  5. Right...now to figure out how to add Tabs. I am completely rubbish at anything technical. I think it would be awesome if you made this a series though.

    ReplyDelete
  6. I had no idea you could center the tabs! Thanks!!

    ReplyDelete
  7. Thank you for the help. I loved this but after I switched to the simple template it won't work. Any ideas?

    ReplyDelete
  8. How can I make my title and date closer to each other by a CSS code? I've done it before, on my old blog but now I've no idea where I found it, and i deleted the old blog :-(

    ReplyDelete
  9. Oh, my gosh. Thank you so much for these codes and simple directions!

    ReplyDelete
  10. you are AWESOME!!! thanks for all the help!

    ReplyDelete
  11. Thank you so much for the simple step-by-step, I've been looking all over for one.
    The problem is it does not work for me at all, I've tried every way possible and I just don't get it.
    Do you have any idea why it wouldn't work at all?
    Thank you,
    Lucy x
    thelittleblush.blogspot.co.uk

    ReplyDelete
    Replies
    1. Hi Lucy!

      That is not fun at all! It may be the template you are using. Different templates have different rules, and thus some may not allow it. But it looks like you have it figured out now! :)

      Delete
  12. hey, thanks a lot! I am blogger from Malaysia and this tutorial is very helping for me :D anyway, I already follow your blog :) Find me here, http://snowbie4.blogspot.com , my blog is about self harm :)

    ReplyDelete
  13. Replies
    1. You're so welcome, thank you for stopping by!

      Delete
  14. I did the post title and date one, and then I wanted to change it so I deleted in and now it is stuck that way. Any tips?

    xo,
    Danie

    http://www.danienordahl.com

    ReplyDelete
    Replies
    1. Hi Danie,

      Unfortunately sometimes I find that Blogger requires you to re-do the whole template. Everytime I make any little change to mine I have to start from scratch. :( It depends on the template you are using I think.

      Delete
  15. omg you are a lifesaver!! Thank you!

    the-perfectwardrobe.blogspot.com

    ReplyDelete
  16. OMG!! Worked like a charm! Every other time I tried to google "center title on Blogger" none of them worked, but yours did. THANK YOU!!

    ReplyDelete
  17. Hi!

    I was able to get the tabs centered, no problem. But when I tried to center the gadget titles it centered the post date and title too! Any ideas? Thank you so much for the great information.

    Sincerely,

    Jessica

    http://26andnotcounting.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Jessica!

      It's likely that in the template you've chosen they are linked, so it may not be able to do them separately if the codes entered separately don't do it.

      Delete
  18. Hi,
    I am having trouble, when I copy and paste as you have listed, a pop up comes up on the bottom of my screen and reads"internet explorer has modified this page to prevent cross site scripting"

    PLEASE HELP!!!! THANK YOU

    ReplyDelete
    Replies
    1. Hey Ruby!

      Honestly, it sounds like an issue with Internet Explorer blocking it. I'd really recommend you try it with Chrome or Firefox (I personally use Chrome or Safari on my Mac, and Chrome on my PC-Never IE because it always seems to cause some kind of problem for me!)

      Delete
  19. Thank you! Thank you! Thank you SO much!
    I had given up on having centered post titles but this tutorial made it possible; and to think it was such an easy thing to do. Seriously, muchas gracias! ;)
    xOxO,
    Brensy S.

    ReplyDelete
  20. Miss Angie I'm a new follower JUST LOOOOVE your tips and writing style. So easy to understand. I'm in the middle of practicing before I change my blogger template over to "Simple" from an old "Minima Stretch" design (which has now limited even changing my fonts so I'm DONE with messing around with the old template). So I'm practicing on a "practice blog". The new "Simple" one is nice, but I can't figure out how to center the BLOG TITLE. I thought I could use this code you shared here but replace "post" with "blog" but it doesn't work. Any tips on that? Thanks so much, can't wait to devour the rest of your blog.
    Michelle Jamieson / newengland-style.com

    ReplyDelete
  21. Actually after I left that comment here I found the answer elsewhere and this is the code that needs to be added to the CSS section to center the blog "header" (maybe I was searching for the wrong term by saying "title")

    #header-inner img {margin: 0 auto !important;}
    #header-inner {text-align: Center ;}

    Thanks so much though -
    Michelle Jamieson / newengland-style.com

    ReplyDelete
    Replies
    1. You are so sweet, thank you for the kind words! And thanks for finding that code! I've never actually centered my header, I always just made the image longer so it naturally centered! I'll add that to my knowledge!

      Delete
  22. Thank you! That was very helpful and easy! Handsandheartsmorethanfull.blogspot dot com :)

    ReplyDelete
  23. I've applied this code, however I found that it centred not only my post date/title, but the images too, which now overlap with my widgets. I went back to remove the code but it's disappeared and the CSS box is blank!? help:(

    ReplyDelete
  24. just remembered I can adjust the widths of my blog and it's fixed!! thanks so much:) x

    ReplyDelete
    Replies
    1. Glad it's resolved! I find that with different templates it reacts differently. IT tries to center everything on my blog too, I have to manually adjust when I write posts if I don't want it centered.

      Delete

Thank you so much for leaving me a comment! I'll come by and visit you as well! Enable your email so I can respond. :) ☮ & ♥!

Related Posts Plugin for WordPress, Blogger...

Disqus for My So-Called Chaos

09 10