You never get a second chance to make a first impression. Your blog or website is your first impression to the online world and Beautiful Dawn Designs is here to make that first impression a lasting one! Beautiful Dawn Designs is a small web design studio that specializes in creating feminine custom blog designs as well as premade Blogger templates and WordPress themes, premade logo designs and more!

How to Center Your Page Tabs in Blogger

September 10, 2012 by 56 Comments

Pink Lounge Blogger Template

Here’s a quick tutorial to show you how to center your page tabs in Blogger. This technique only works if you’re using the “Pages” gadget. Please backup your template before making any changes!

1. In your Dashboard click on “Template”

2. Click on “Customize”

3. In the template designer, click on “Advanced” and “Add CSS” and add the following code to the box:

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

It should look like this:

4. Be sure to press enter after you paste the code. Finally click on “Apply to Blog” in the upper right hand corner and you’re done!

Filed Under: Blog, Blogger Tutorial

56 comments on “How to Center Your Page Tabs in Blogger”

  1. Paloma on said:

    So helpful! Thank you!!

    Reply ↓
  2. Dawn Farias on said:

    Perfect – thank you!

    Reply ↓
  3. davi on said:

    Hi Tiffany! You do a beautiful job! I am currently trying to redo my entire blog layout but blogger seems to be down right now. Nothing I am doing on my tabs is being applied. Have you experienced any problems of this sort?

    For example, I am using Simple template and my tabs won’t center like you just advised.

    The font for the tabs is stuck in some default mode. Your tabs have a cute font and look great. Mine look so very generic, no matter what I do.

    Any ideas what I should do?

    Reply ↓
  4. davi on said:

    ok, it finally applied the code and was able to center my tabs, yay!

    i think the rest of the problems i am having(font size and type) are issues blogger is having.

    but out of curiosity, are the fonts in the above sample template(Home, About, Daily Reads, Contact) blogger fonts? they don’t look familiar to me on blogger. or did you have to do something special to get them to apply?

    Reply ↓
  5. Tiffany on said:

    Davi,

    It is an embedded Google Web Font.

    Reply ↓
  6. davi on said:

    Thanks so much! I’ll look for a tutorial on that! Unless you know of good one;) Your tutorials are very easy to follow.

    Reply ↓
  7. April on said:

    Thank you! You have very easy to understand tutroials.

    Reply ↓
  8. Michele on said:

    This was an easy to follow tutorial except it didn’t work for me. I did everything as you suggested. Hm. I will try it again.

    Reply ↓
  9. Michele on said:

    Oh yes it worked now! I just pasted each line separately and made sure to press enter after each. How cool! :)

    Reply ↓
  10. Beatnik Barn on said:

    Worked like a charm! Thanks so much!

    Reply ↓
  11. Rachel on said:

    life saver! thanks for this. :)

    Reply ↓
  12. Megan C. Stroup on said:

    Oh my goodness, thank you SO MUCH! I have been wanting to do this for a while, and this was SO easy. :)

    megancstroup.blogspot.com

    Reply ↓
  13. Shannon Quigley on said:

    Thank you! I have been to numerous sites, who all have the same code and i’ve tried with no luck until now. Thank you for telling me to press ENTER! made all the difference!!

    Reply ↓
  14. Kate at A Creative Cookie on said:

    Works PERFECTLY. Thank you SO much!

    Reply ↓
  15. Nancy on said:

    Thanks so much!!!! I tried a couple of other codes from others with no luck. This one worked perfectly!!!!

    Reply ↓
  16. Ashley on said:

    Thank you!

    Reply ↓
  17. Miiestory on said:

    This has been very helpful. Thank you so much! :D

    Reply ↓
  18. Leanne on said:

    Thanks so much, it worked….

    Reply ↓
  19. Sabrina on said:

    Thank you! It worked instantly! :)

    Reply ↓
  20. Joy on said:

    THANK YOU! Hitting the “enter” button after pasting code was an important reminder for me. Thanks again for the help.

    Reply ↓
  21. Angie on said:

    Brilliant! Thank you. :)

    Reply ↓
  22. Shannon Deese on said:

    Love it!! Thanks so much!!

    Reply ↓
  23. Anastasios on said:

    Life saving little detail :)
    Thanks a lot dear!!!

    Reply ↓
  24. Emily on said:

    Hi Tiffany,

    For some reason this is not working for me. Any advice as to what I might be doing wrong?

    Thanks!

    Reply ↓
  25. "Lucy" on said:

    This is not working for me, either. Does anyone have a plan B?

    Reply ↓
  26. Pam on said:

    Yay! Thanks!

    Reply ↓
  27. Bahiyah Khalid on said:

    thank you! very helpful. check out my blog at http://bahiyahkhalid.blogspot.com/

    Reply ↓
  28. Kelly on said:

    When I did this it added each page to a new line. Is it supposed to do that? I want them all on one line just centered on the page. Am I doing something wrong?

    Reply ↓
  29. Charlotte on said:

    Thank you! Worked [perfectly!

    Reply ↓
  30. Tracey on said:

    That was easy! Thank you for the code!
    The Teacher’s Chair

    Reply ↓
  31. Jackie on said:

    Thank you, thank you, thank you!!! You rock!!!

    Reply ↓
  32. Taylor on said:

    Hi, for my tabs when i click on them like for the link to a different part of my page it doesn’t work like your’s do. What I mean is when I click on one of your tabs it takes me to a different part of your page can you tell me how to do that it would help a lot!

    Reply ↓
  33. Sara on said:

    Thanks so much for your help! :)

    Reply ↓
  34. Jinny on said:

    Thank you so much!!!!! ^^

    Reply ↓
  35. Anna on said:

    I’ve been annoyed with my tabs being to one side for ages, thanks so much!!

    Reply ↓
  36. Littlemissdoro on said:

    Thank you! That was really easy and helpful :)

    Reply ↓
  37. Jordan @ Jordan's Family of Foodies on said:

    Thank you very much! This is just want I was looking for.

    Reply ↓
  38. Meghan on said:

    Hey thanks! Super easy tutorial :) nerky.blogspot.com. You can take credit for my SWEET centered tabs.

    Reply ↓
  39. caroline @ c.w.frosting on said:

    Great tutoral, so easy to follow! Thank you so much!

    Reply ↓
  40. s on said:

    So quick and easy! Thanks so much, that was painless!! :-)

    Reply ↓
  41. Prasant on said:

    Thanks admin for this beautiful post, I am going to apply these steps to make my blog look more customized and professional. Please give a look to my blog and feel free to comment whether positive o negative.
    http://prasantmihsra.blogspot.com

    Reply ↓
  42. Shelly on said:

    Thank you so much!!!
    companyfortytwo.blogspot.com

    Reply ↓
  43. Kimberly Hughes on said:

    Thank you!! Fabulous!

    Reply ↓
  44. Hannah on said:

    Thank you. This was so helpful!
    hannaH

    grannysquareflair.blogspot.com

    Reply ↓
  45. Emma Louise on said:

    Hi,

    Thanks for the tutorial it worked great!
    How do I do the same for the header description?

    Please email if you know

    Thanks

    Reply ↓
  46. victoria gates on said:

    This is seriously amazing. Thank you so very much for sharing!!

    xo, Victoria
    mylifeinverseblog.blogspot.com

    Reply ↓
  47. Aggie on said:

    This was just what i was looking for, thank you!

    Reply ↓
  48. Carolyn on said:

    thank you! very helpful and easy to understand :)

    Reply ↓
  49. Joy on said:

    Thank you!!! I searched and searched all over Blogger to get this taken care of and in SECONDS I was able to use your tutorial to fix it. Bless you!

    Reply ↓
  50. Urban Flowerpot on said:

    YOU ROCK! Thank you for this.

    Reply ↓
  51. Leesa on said:

    thanks so much, screen shots of the instructions were really helpful :)

    Reply ↓
  52. Jing on said:

    thank you for sharing! <3

    Reply ↓
  53. Mimosagal on said:

    thank you so much for this, was super easy to do, awesome instructions. Made my blog that much better. YOU ARE AWESOME!

    Reply ↓
  54. Megan on said:

    Thanks! This was SO helpful!

    Reply ↓
  55. Suê on said:

    Its not working for me T____T

    - amazinglaugh.blogspot.dk

    Reply ↓

Speak Your Mind

*

HTML tags are not allowed.