Blogging 101: How to Center Your Page Tabs in Blogger

Have you been wondering how to "Center your page tabs on a blogger blog" or "How to remove the page tabs divider lines"? 

Well, I'm here to help!  Here's an easy DIY to make the changes yourself!

Part 1: Centering your Page Tabs

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:

1 2	.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 with centering your page tabs!

Part 2:  Making the line dividers transparent or white so they don't show in-between the page tabs

1. Follow steps 1 & 2 above to open your template designer

2. Click the "Advanced" link on the left side of the page. A new list of links appears to its right. Scroll to the bottom of this list.
 
3. Click on the "Accents" link
  
4. You want to change your color code to #ffffff in the field under "Separator Line Color" to make it white, or you could choose the checkered "Transparent" box at the bottom of the color widow to have it match your background. 
 
5. Type #ffffff in the field under "Tabs Border Color" to have it white, or you could choose the checkered "Transparent" box at the bottom of the color window to have it match your background as well. 

6. If you want your "Tabs Background" to be transparent and the same color as your main background you will want to scroll until you see "Tabs Background" on the right hand menu.  Once highlighted click on the drop down Background Color box and select the checkered "Transparent" option at the bottom of the window.

If you want the background to be white then you can change the color code to #ffffff .  Since my background is white I just changed the color code and left it at that. 

7.  Click the "Apply to Blog" button in the upper-right corner of the screen to save the changes.

8. Click the "Back to Blogger" link to return to the Blogger Dashboard.

Hope this helps you! 

If you use this tutorial I'd love for you to leave me a comment with a link to your site below so I can come by and check out your new updated tabs!