SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Sunday, July 31, 2011

How to center-align Pages/Pagelist gadget in Blogger

Thanks to Vanessa Morgan who had recently visited this blog and wanted to know how to center the horizontal page tabs below the blog's header. That spurred me to google for answers after several hours of failed attempts to do it on my own.

I'm terribly happy to have learned much from GreenLava, the guru at Blogger Sentral who's most helpful and generous in sharing his knowledge and expertise. THANK YOU!

By default, the Pagelist or Pages gadget is left-aligned in Blogger blogs but can be easily aligned to the center if you so desire.

Learn how to center the Pages or PageList gadget,
that's located below the blog's header, by following these simple steps:
  1. Sign in to your Blogger account. At Dashboard, click Design | Template Designer.

  2. Go to Advanced | Add CSS tab. Add the following CSS code snippet in the field box provided on the right:

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


  3. The alignment of the pagelist to the center will be reflected instantly in the live preview below. If you're satisfied with the changes, just click the orange button, Apply to Blog, to save changes.

  4. Finally, click the Back to Blogger button to quit the Blogger Template Designer and return to the Page Elements page. That's all to it! Easy, right?

Screenshot of Template Designer to illustrate addition of CSS snippet

Enjoy!

Keep learning~~keep smiling~~keep sharing!!

59 comments:

  1. thanks for this jacq! applied it on my blog already :)

    ReplyDelete
  2. You're most welcome, Janie! Nice to know you liked it!

    ReplyDelete
  3. Thank you for this, I have wasted hours playing with the code, googling and playing with the CSS, and only your instructions have worked for me. You've made my day!

    ReplyDelete
  4. My pleasure in sharing, Lizzy Lips! Thanks for your positive feedback and great to know I've made you happy today. I had wasted precious hours too like you before stumbling on GreenLava's tutorial on this subject. :)

    ReplyDelete
  5. Just found your blog and omg I love it! I am a newbie and for the life of me, couldn't simply center my pages gadget! I did it! Thank you! Now off to search your site on customizing my post footer! I can't figure out how to have "leave a comment" on the main pages post!

    ReplyDelete
  6. You're most welcome, Jessica! Great to know you're delighted.
    Clever girl, you've solve the comment mystery, I see! Hehe, I haven't learnt how to do that yet. ;)

    ReplyDelete
  7. I tried this twice and couldn't get it to work...nothing changed. Any advice? Thanks.

    ReplyDelete
  8. Jennifer, I saw that all's well at your blog now re centering your Pagelist gadget. That's great.

    ReplyDelete
  9. u can''t evn knw how greatly u hlpd me

    ReplyDelete
  10. This didn't work on my computer and idk what to do! Help?!

    Shelby
    sweetconfessions21.blogspot.com

    ReplyDelete
  11. Vishhal : Great to know... thank you!

    Shelby : Congrats! You've achieved it as seen in your blog!!

    ReplyDelete
  12. Did you use a special kind of blogger template for this?

    I know I'm going to sound like a broken-record. but I can't get it to work. Or maybe it "kicks in" after awhile, even if it doesn't immediately?

    What do you think could be the problem?
    I was SO glad when I found this after searching for hours and trying to figure out how to edit HTML!

    ReplyDelete
    Replies
    1. I see you've got it working alright, Eva! Great!

      Delete
  13. Jacqui,i can't get it right, i already copy from here and pasted on my CSS window, but there's no experimental window showing so i click Apply to Blog, and nothing happened. I don't know what to do next. thanks.

    ReplyDelete
  14. Oh Jacqui, i closed the site, then opened my site again and repeat the process, and yes it worked after a sometime. Thank you so much. Yours are easy to follow instructions really designed for computer lingo naive people, hahaha! I am happy i did something lovely today.

    Now, what is left for me to do is how to put those reply links in the comments, just like yours. I am excited again.

    ReplyDelete
    Replies
    1. Congrats, you did it... I'm happy for you too, Andrea! Frankly, I try to present my tutorials as simple as possible with illustrations, hoping that it's always a success for whoever who tries it. :)

      I deduced that you'd like to have the threaded comments, right? If so, just enable the feature at your blog by going to Settings > Posts and comments, then scroll down to Comment Location and select Embedded, followed by Save Settings.

      Delete
  15. Dear Jacqueline, thank you for this tip!
    I've been searching all over this and you 'saved' my blog from looking weird!
    Thank you so so so so much!!<333

    ReplyDelete
    Replies
    1. You're most welcome, Vanessa! Great to know you're happy!

      Delete
  16. Tried doing this to my blog but didn't work. I used an eblogger template.
    Can anyone help? http://www.clubedrunning.com/

    ReplyDelete
  17. Dear Jacqueline,
    this didn't work on my blog. i've repeated several times and nothing change. is there another way to center align pagelist?? need help :)

    ReplyDelete
    Replies
    1. Sorry, Nadia... whatever I know is already shared in the above tutorial.

      Delete
  18. My pleasure in sharing, Michael!

    ReplyDelete
  19. Thank you soooo much!! I was looking for this for so long!! ;)

    ReplyDelete
    Replies
    1. Great to know your search is over and I've put a smile on your face, Marisa!

      Delete
  20. Replies
    1. My pleasure, Shylu! Nice to know it worked for you.

      Delete
  21. It didn't work on mine, can you tell me what you think why it isn't working? Thanks!

    ReplyDelete
    Replies
    1. Sorry, TheDanGalman... out of my league to trouble-shoot technical issues.

      Delete
  22. Your posts are very helpful, Jacqueline. Thank you very much for sharing these codes. It really does magic for newbies like me! :)

    ReplyDelete
    Replies
    1. Great to know that, Angel... I love sharing what I know that others can benefit! Thanks for your appreciation.

      Delete
  23. What a breeze! Thanks for the helpful codes! I managed to align mine too!

    ReplyDelete
    Replies
    1. Thanks JustJaslin for your positive comment. Great to know that you've found the codes helpful and succeeded in applying them.

      Delete
  24. Wow! I can't believe how simple that was. This is something that's been bothering me for a while now, I'm so glad now that it's fixed.


    http://fashionananthropologicalpointofview.blogspot.ca/

    ReplyDelete
    Replies
    1. Great to know that you're happy with the outcome, ttea!

      Delete
  25. i didn't work with my blog :S
    besides , i want to align only one page (center)
    what shall i do ?

    ReplyDelete
    Replies
    1. Sorry, Firas... I just know how to align on all pages as in my tutorial above.

      Delete
  26. Wonderful! Thanks so much for this post! Any way you know how to remove the border from the panelist, as well?

    ReplyDelete
    Replies
    1. I just experimented removing the panelist border at my other blog. Just go to the Blogger Template Designer, scroll down the menu to 'Advanced' and choose 'Tabs background', then play around with the background and border colours to get your desired effects. I've done it in this blog and quite satisfied with the results.
      Hope this helps. I'm sure that is a way to add CSS codes but I'm not so technically skillful to do that. Sorry!!

      Delete
  27. It didn't work with my blog :(

    ReplyDelete
    Replies
    1. Bebeng, I noticed that you've already had your Pagelist centered, right?

      Delete
  28. Thank you for this post! I have the page titles centered now, is there a way to add spacing between each page title? Mine look all crammed together. Thank you!

    ReplyDelete
    Replies
    1. You're most welcome, Brooke... the pleasure is all mine in sharing.
      To add space between each page title, try adding the following CSS code to your Blogger Template Designer:

      .PageList li a {padding:10px 30px 10px 30px !important;}

      You can change the px value as desired. The 10px is padding for top and bottom, whilst the 30px is for right and left of page title.

      Delete
  29. I added the code to my css and it centers the pages fine in Firefox and Crome. When I look at my blog in IE the pages look centered at first then stack on top of each other. Any ideas why? I removed the css code until I can figure it out.

    ReplyDelete
  30. thanks a lot for that code!

    ReplyDelete
  31. Thank you for sharing this!

    ReplyDelete
  32. Hi Jacqueline, can you tell me how to adjust pages on the top of the logo in the blogspot site..

    ReplyDelete
    Replies
    1. Dinesh... I'm not so clear what you want. I gather that you want to relocate your pages to be above your blog's header, right? If so, just google with these words... how to add a gadget above the blog's header... or something similar.

      Delete
  33. it doesn't work on my blog :( followed every step...

    http://dinosauryard.blogspot.pt/

    ReplyDelete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search