Thursday, 22 September 2011

Want to center your Blogger pages links?

By default, the blogger pages links are on the left of the template.  Not everyone likes this and I have had a few questions about centering them.

Here is an example using my Notebook Scribbles template:



Changing these links to be in the centre of your blog is not very difficult.





Want to know how?

1) Go to the "Template Designer" area within Blogger.  In the far left area, select the "Advanced" tab and then the "Add CSS" tab in the second column (hint, it's way down the bottom).

2) Paste the following code into the CSS window:


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

Click for a larger preview

3) The live preview of your blog should update in the window and you should see that these links are now centered.  If you are happy, click "SAVE".

That's it!

50 comments :

  1. Thank-you! I've just made use of your guidance and am very happy. Now to update those pages so that they're worth visiting!

    ReplyDelete
  2. Hello, thank you very much for your work as beautiful, you could tell me the name of the font (letter) of this item? the source is precious ...

    Another thing, as thought about doing templates for youtube channels?
    a kiss and thank you very much for everything!

    Hola muchas gracias por tus trabajos tan bonitos, podrías decirme el nombre de la fuente (letra) de este tema? es preciosa la fuente...

    Otra cosa, as pensado en hacer plantillas para los canales de youtube?
    un beso y muchas gracias por todo!

    ReplyDelete
  3. Hello Candy,
    I have a problem that drives me nuts. I used your code to center the pages as you said to and than saved. When I open the blog the pages are centered but after a second the links go in the middle 1 under another and the tabs backround color goes to the left one under another. Can you maybe have a look at my page?

    ReplyDelete
  4. Hi Odilia - yep, easy question - you have too many tabs. The new line of tabs will move to the next row (and that will then be centred).

    If you have fewer menu tabs (ie: over one line) this won't be a problem

    Cheers
    Sharnee

    ReplyDelete
    Replies
    1. I have just 3 tabs but this is still a problem. can u help please?

      eznira.blogspot.com

      Delete
  5. Hello Sharnee,

    Thanks for the response. It had nothing to do with the too many tabs thing. However I took out some parts of the code related to the tabs and it works now in both firefox and ie.
    Succes further with your blog! Nice stuff you have here!

    ReplyDelete
  6. Thank YOU so much for this layout! For the first time ever I look forward to LOOKING at my blog!

    I was wondering though how to even get the links at the top, I looked through your blog (not the whole thing) but I was wondering if you could direct me to the link. Thank you again so so much!
    Abbi

    ReplyDelete
  7. Hi, I've tried this twice and nothing moved a bit! Any suggestions? Thanks so much!

    ReplyDelete
  8. Whoa! Thanks, this helped a lot! Only, if you want it to be a centered list, change 'inline' to 'outline' ;)

    ReplyDelete
  9. I've tried it and my tabs won't budge any suggestions.
    http://time4kindergarten.blogspot.com/


    time4kindergarten@comcast.net

    ReplyDelete
  10. Thank you so much for this tutorial! It's so easy but I couldn't find any solution by myself. It was the first result on Google although I googled it on German!
    lydia ♥

    ReplyDelete
  11. Thank you! This tutorial was so quick and easy. : )

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Thank you thank you! Saved me some OCD-ness.

    ReplyDelete
  14. YAYYYY!!! Thank you thank you!!! So easy and have wanted to do that for sooooo long!!

    ReplyDelete
  15. THANK YOU SO MUCH

    ReplyDelete
  16. thank you so much for taking the time to create this post!

    ReplyDelete
  17. wooooo! thanks for this very easy tip. love it.

    ReplyDelete
  18. Thank you for this, exactly what I was looking for (:

    ReplyDelete
  19. Thanks, this was so easy!!

    ReplyDelete
  20. I followed all the steps but I seem to be experiencing a bit of a problem. The code works for my site on Firefox but on IE, the links are on top of one another instead of being in the same horizontal line. Can you please help me?

    Thank you! :)

    ReplyDelete
  21. The masѕage is additіοnally dοne to postpоne the
    aρparіtion of fatigue! Some stateѕ ѕtіll hаve no licеnѕing гequirements.
    The key iѕ feelіng comfortable with one's professional massage therapist.

    This not only gives an overall sense of relaxation but also works at enhancing the blood circulation, lessening the time needed for muscles to recover during injuries, stretching of tendons, stimulation of the skin and lowers blood pressure thereby giving the client an improves sense of health inside out. Designating that many therapists as lead and then strategically scheduling them in order to cover the entire work week would surely prove to be an ineffective solution if not a nearly impossible plan. Apart from these, there are also certain conditions you may not know you suffer from, but which can be the cause of your neck pain!! But the trend has been changed in this modernize world and now i guess. In the same way, chair massage could also enhance performance at school or at work.

    my webpage: i tried london tantra
    Here is my web page : tantric massage

    ReplyDelete
  22. Hi, I've tried to center my pages using the Advanced CSS but it isn't working. Is it possible that there is something in my HTML code that is over-writing this? Any help would be SO appreciated! Thank you! nattymichelle.com

    ReplyDelete
  23. this is great! thank you so much for sharing.

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Awesome tip thank you it has been bugging me for ages!

    www.youonmycloud.blogspot.com xx

    ReplyDelete
  26. Thank you for the quick & easy tip - so helpful!

    ReplyDelete
  27. For those of you where it isn't centering, be sure to press ENTER after you paste in the code.

    Kristin

    ReplyDelete
  28. Thank you thank you thank you for this!!

    ReplyDelete
  29. THANK YOU SOOOOOOOOOOOOOOOOOOOOOOOO MUCH!!!!!!!!!!!!!

    ReplyDelete
  30. Thank You so much this helped me alot now that I found a tutorial that actually works!!!!!

    ReplyDelete
  31. So so so helpful! I'm so grateful for these tutorials - making my life so much easier! Thank you so much!

    ReplyDelete

  32. Buy quality oak furniture, beds, wardrobes, bedroom, dining, kitchen and occasional furniture with fast UK delivery from Factory Direct Furniture UK, massage relciners links

    ReplyDelete
  33. thank you, this post helped me a lot

    ReplyDelete
  34. oh my god, thank you thank you thank you!

    ReplyDelete
  35. You are AMAZING. Thank you.

    ReplyDelete
  36. It's not working for me :(
    Tried pressing enter after html code and still nothing.
    I have other html coding below it. Could this be interfering?

    ReplyDelete
  37. It wasn't working for me either, but I changed 'PageList' to 'LinkList' and now it's working, so try that! :) x

    ejverx.blogspot.co.uk

    ReplyDelete
  38. Thank you so much! I've used this for my blog: http://furreekatt.blogspot.com/

    ReplyDelete
  39. Thank you so much :) this's working in my blog.

    ReplyDelete
  40. Thanks a lot, I was looking for solution fot it throug whole html code and cound't fine it so far..., I gave up and found your tip using google. Great work. Cheers.

    ReplyDelete
  41. Thanks for this easy-to-do tutorial. ;)
    check out my blog: http://blognirhebzie.blogspot.com/

    xx

    ReplyDelete
  42. its working for me but i cant get the dashboard! idk why???

    ReplyDelete
  43. Thank you!! It really helped :)

    ReplyDelete

If you're having issues, PLEASE leave an email address I can contact you on - and also don't forget to leave your blog URL. Please also read my FAQ which are >>> HERE

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.

Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

Thanks for reading,
Sharnee