12.01.2011

Blog Tutorial #2: How to Center Your Blogger Page Tabs

This is another super simple tutorial. Another tutorial where you just copy and paste a code into the CSS section of your Blogger template.

If you are using the horizontal pages gadget, the page list aligns left by default. A lot of people wonder how to make them centered on their blog. So I'm going to show you how. You can click on the following images to enlarge them if you need to.



1. Go to your dashboard in Blogger. Then, go to the 'Template Designer' tab.



2. When you are in 'Template Designer' mode, click on 'Advanced'. Then go to the 'Add CSS' tab.



3. When you open the CSS window, paste in the following code:


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




So, it should look like this:



After you paste the code, hit the 'Enter' key on your keyboard and then click 'Apply To Blog'. Then you are done! See, how easy it is? Now your page list should be centered like mine:



~xoxo~



14 comments:

  1. This was perfect!! Thank you so much, you are awesome!

    ReplyDelete
  2. Hi! This is a great tutorial, and I just tested it on my blog. I decided I wanted the pages to be a list again, so I moved the gadget, but now the CSS you posted is stuck at the top of my blog and my pages gadget is nonexistent, even though I deleted the code you posted! Can you help me, I'm not sure what to do... :/

    My blog link is: http://writingbeyondthemoon.blogspot.com/

    ReplyDelete
    Replies
    1. This comment has been removed by a blog administrator.

      Delete
  3. Ah, I've fixed it. All I had to do was delete and then re-add the pages gadget. Carry on! :)

    ReplyDelete
  4. Not working in IE 9. Tab text centers in a stack while tab backgrounds align left in a stack. Confirmed working in Chrome 18.0.1025.152 and Firefox 11.

    ReplyDelete
  5. Tried this and it centred all my page tabs one on top of the other :/ Not too sure how to fix it. I put it back to being left aligned. But i really want it centred!

    http://thecraftingcrew.blogspot.co.uk/

    ReplyDelete
  6. thank you thank you. very helpful. glad you don't charge for this service. ^^

    ReplyDelete
  7. Hi, Thank you for this advice I have been wondering how to do this for ages. I have one question if it isn't 2 much trouble. In my tab bar I have lines separating each page how do I put a line in front of the home page as it looks uneven xxx

    http://www.sparkleinsequins.com/

    ReplyDelete
  8. Thank you for all of your comments and I REALLY apologize that it has taken me a while to respond to some of you. Been a little crazy around here lately but I hope that I can still be of some help.

    Aveen: If I remember correctly, I had the same problem when creating my tabs. I could not, for the life of me, figure out how to create the line in front of the 'Home' tab so it would look clean and centered. So what I did was, I played around with the font and size of my tab text until the line after my last tab was removed. So now there is no line before the tabs begin, or when they end, and it still looks centered and even. This is definitely something interesting to look into and when I figure it out, I will add it here. If you have found a way to add the line in front of the first tab, please share.

    Laura: Which internet browser are you using? The tutorials I post have been tested in both Chrome and Firefox so I have not seen how it happens in other browsers. I will check it out.

    ReplyDelete
  9. I worked, but it made a white bar instead the nav bar.
    What should I do?

    ReplyDelete
  10. Thank you so much for this tutorial! I have been searching for a long time to find a way to center my pages tab. Now, they're centered and I couldn't be happier.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...