This page has moved to a new address.

Blogging 101: How to Center Your Page Tabs in Blogger

The Best Blog Recipes: Blogging 101: How to Center Your Page Tabs in Blogger

Feb 5, 2013

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:

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



At February 5, 2013 at 10:16 PM , Blogger Hilary said...

I literally just did this on my blog! Thank you so much for the tutorial :) it was exactly what I was looking for!

Thanks for sharing :) I found you via Ginger Snap Crafts

At February 5, 2013 at 11:27 PM , Blogger Unknown said...

Yay! I'm so glad you liked the tutorial :) I just popped over and checked out your tabs and liked your cute blog on GFC while I was there!

At March 10, 2013 at 7:42 AM , Anonymous How to motivate your downline said...

Great post. I just located your blog and wished to let you know that I have certainly loved reading your blogs. At any rate I’m going to be subscribing to your feed and I really hope you are writing again soon.

At April 3, 2013 at 9:17 AM , Blogger Carrie @ My Favorite Finds said...

That's awesome! So helpful. Thanks for sharing at Pinworthy Projects


Post a Comment

Subscribe to Post Comments [Atom]

<< Home