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

Jacq's signature
Labels: , , ,

59 comments:

  1. janieAugust 2, 2011 at 11:38 AM

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

    ReplyDelete
  2. JacquelineAugust 3, 2011 at 10:11 AM

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

    ReplyDelete
  3. Lizzy LipsAugust 12, 2011 at 5:57 AM

    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. JacquelineAugust 12, 2011 at 6:16 PM

    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. Jessica @ FourGenerationsOneRoofAugust 26, 2011 at 9:27 PM

    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. JacquelineAugust 29, 2011 at 4:11 PM

    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. Jennifer @ Dimples and TanglesDecember 30, 2011 at 12:07 PM

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

    ReplyDelete
  8. JacquelineDecember 30, 2011 at 9:37 PM

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

    ReplyDelete
  9. vishhalJanuary 5, 2012 at 2:40 AM

    u can''t evn knw how greatly u hlpd me

    ReplyDelete
  10. ShelbyJanuary 5, 2012 at 5:34 AM

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

    Shelby
    sweetconfessions21.blogspot.com

    ReplyDelete
  11. JacquelineJanuary 6, 2012 at 6:38 PM

    Vishhal : Great to know... thank you!

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

    ReplyDelete
  12. EvaFebruary 22, 2012 at 6:19 AM

    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. JacquelineFebruary 23, 2012 at 11:42 PM

      I see you've got it working alright, Eva! Great!

      Delete
  13. AndreaFebruary 24, 2012 at 12:22 PM

    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. AndreaFebruary 24, 2012 at 12:34 PM

    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. JacquelineFebruary 25, 2012 at 2:08 PM

      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. VANESSA!March 31, 2012 at 8:18 PM

    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. JacquelineApril 14, 2012 at 9:31 PM

      You're most welcome, Vanessa! Great to know you're happy!

      Delete
  16. Syndicated MapsApril 5, 2012 at 11:49 AM

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

    ReplyDelete
  17. NADIAApril 27, 2012 at 9:31 AM

    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. JacquelineApril 30, 2012 at 11:48 AM

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

      Delete
  18. UnknownApril 30, 2012 at 5:28 PM

    thnx!

    ReplyDelete
  19. JacquelineMay 2, 2012 at 3:55 PM

    My pleasure in sharing, Michael!

    ReplyDelete
  20. Marisa • PretoMarfimMay 9, 2012 at 11:45 PM

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

    ReplyDelete
    Replies
    1. JacquelineMay 11, 2012 at 5:46 PM

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

      Delete
  21. ShyluMay 20, 2012 at 9:57 PM

    Thank u:) It works

    ReplyDelete
    Replies
    1. JacquelineMay 21, 2012 at 6:28 PM

      My pleasure, Shylu! Nice to know it worked for you.

      Delete
  22. UnknownJune 9, 2012 at 6:19 PM

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

    ReplyDelete
    Replies
    1. JacquelineJune 11, 2012 at 6:23 PM

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

      Delete
  23. Angel AguilarAugust 3, 2012 at 12:42 PM

    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. JacquelineAugust 4, 2012 at 10:09 AM

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

      Delete
  24. JustJaslinAugust 6, 2012 at 3:20 AM

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

    ReplyDelete
    Replies
    1. JacquelineAugust 9, 2012 at 6:45 PM

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

      Delete
  25. tteaAugust 18, 2012 at 6:13 AM

    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. JacquelineAugust 21, 2012 at 9:22 AM

      Great to know that you're happy with the outcome, ttea!

      Delete
  26. JacquelineSeptember 7, 2012 at 4:34 PM

    You're most welcome!

    ReplyDelete
  27. UnknownSeptember 16, 2012 at 12:22 AM

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

    ReplyDelete
    Replies
    1. JacquelineSeptember 17, 2012 at 11:13 AM

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

      Delete
  28. Random ForeversNovember 26, 2012 at 12:53 PM

    can't get this to work on my blog :(

    ReplyDelete
  29. MaggleBishDecember 1, 2012 at 12:49 PM

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

    ReplyDelete
    Replies
    1. JacquelineDecember 9, 2012 at 11:35 AM

      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
  30. DDecember 2, 2012 at 11:11 PM

    It didn't work with my blog :(

    ReplyDelete
    Replies
    1. JacquelineDecember 9, 2012 at 10:33 AM

      Bebeng, I noticed that you've already had your Pagelist centered, right?

      Delete
  31. BrookeJanuary 9, 2013 at 3:05 AM

    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. JacquelineJanuary 13, 2013 at 12:45 PM

      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
  32. Tina ButlerMarch 5, 2013 at 11:05 PM

    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
  33. AnonymousApril 1, 2013 at 3:54 AM

    thanks a lot for that code!

    ReplyDelete
  34. JacquelineApril 2, 2013 at 10:55 AM

    Thanks, Sanved!

    ReplyDelete
  35. meJune 12, 2013 at 2:14 AM

    Thank you for sharing this!

    ReplyDelete
  36. UnknownJuly 7, 2013 at 6:48 PM

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

    ReplyDelete
    Replies
    1. JacquelineJuly 8, 2013 at 5:30 PM

      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
  37. The Melody FactoryNovember 29, 2013 at 6:11 AM

    Thanks heaps Jacqueline.

    ReplyDelete
  38. SankeerthJuly 29, 2014 at 10:52 PM

    you are awesome..!!!

    ReplyDelete
  39. UnknownAugust 13, 2014 at 12:38 AM

    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.

Subscribe to: Post Comments (Atom)
Custom Search