Get ideas & inspirations delivered to your inbox. You won't want to miss a thing, so subscribe free to the Blog Feed or sign up for Free Email Updates on the latest projects, shop news, blog tutorials & more. Check out the Project Gallery, Garden, Eat & Inspirations tabs above, to see what you have missed. Browse through the sidebar for this week's Popular Posts!
**Please note: Some links may be broken, if this happens, please search for the title of a post on the search tab on the right while I work on fixing the problem.---->

How To Center Tabs & Page List in Blogger, Under Your Blog Title

So now that you know how to create pages for your blog and how to change it's location, 
you are ready to center it under your Blog Title.

First step is to sign into your blogger account.
Once you are in your blogger account, click on,  Design on the top right of your screen.
You are now in your dashboard screen, click on template on the left side.
Then click the orange button the reads, customize.
This will now take you to your Template Designer screen.
Now look on your top left side of your screen, you will see a list of sections, 
the last one is Advanced, click on it.
You will see another list of sections with a scroll bar with the first section named Body Text, scroll down the list until you see Add CSS, click on Add CSS.
You will see a blank area open up.  This is where you will paste the code I will provide to center your pages.
Highlight the blue code below and copy.

(For Page List that you create)

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

(For Default Tabs)

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

On your blank area, paste this code and press the space bar to preview.
Below this screen you will see your blog preview, scroll down on your blog to see your tabs or (pages). 
It should center itself when you paste the code.  Are they centered?  
If so, you may click on the top left side of your screen where it reads apply to blog
It is now saved.
This is a simple and easy step.  If for any reason it does not work, contact me.  
This may not work on already established templates.

Don't forget to Rate My Blog @ Top Mommy Blogs

19 comments :

  1. omg...THANK YOU!! I've been searching forever and was JUST about to give up ('til I luckily found your post!)
    The .PageList {text-align:center !important;}...code does not work for me on the "Picture Window" template.
    This is the first time I have seen the ".tabs" code and it worked wonders! Thanks again! :)

    ReplyDelete
  2. Thank you so much--easy,simple,fast,and great!

    xoxo,
    Adalia
    {glitterandpeonies.blogspot.com}

    ReplyDelete
  3. how do you lower the tab text? mine is hugging my header and i would like it to move down. i have figured out how to adjust the tab height but haven't been able to figure out how to move the text down at all.

    ReplyDelete
    Replies
    1. Here is the post on how to do that: http://www.inspirationsbyd.com/2013/08/how-to-lower-your-tabs-on-blogger.html

      Delete
    2. What a great help! I am so lost with all this CSS coding stuff. Starting a blog is so much harder than it looks, but you made it so much easier! TY!

      Delete
  4. This was so helpful! Thanks so much for taking the time to post! :)

    http://learningcreatingliving.blogspot.com/

    ReplyDelete
  5. Thanks for posting this! It's helped so much!

    ReplyDelete
  6. I just used this to center some tabs. Thanks so much for your super easy-to-follow tutorial! My blogging partner and I are so grateful for people like you who are willing to teach us how to do this stuff.

    ReplyDelete
    Replies
    1. I've gone through several "tutorials" , but you definitely made it so easy to understand.
      ^ easy-to-follow indeed!

      Delete
  7. thank you so much!! it was helpful..

    applied it on my blog: http://www.aucourantprincess.com/

    ReplyDelete
  8. Thanks for sharing =) I'm busy for a new lay-out for my blog. I want to have a new one in the new year.

    ReplyDelete
  9. Thanks for this awesome tutorial! This helped me edit the tabs on my blog: http://mphotoaday.blogspot.com/.

    ReplyDelete
  10. You just saved my life! thank so much!!!
    http://femmefatalefantasy.blogspot.com/

    ReplyDelete
  11. Girl, you ROCK! Thanks for sharing!!!

    ReplyDelete

Thank you for adding your thoughts. I read all of your comments and I reply to all one way or another, mostly by email or on your blog. You brighten up my day & for that I thank you.

Related Posts Plugin for WordPress, Blogger...
Pin It button on image hover