In February of 2010 Blogger released its Pages feature.  It was really needed and such a wonderful feature. We, Blogger users, no longer have to maintain multiple Blogger blogs to create a store presence! Anyway…you may not know how to "center" the nav bar that is created when you add the Pages gadget, so I wanted to quickly share that with you.

With the new Template Designer, released in the Summer of 2010, you no longer have to go to the Edit HTML tab to add custom CSS code. You may simply go to the Tempalte Designer and add the Custom CSS code there:

• Login to Blogger.
• Click on Design.
• Then Template Designer.
• Click on the Advanced Tab.
• Then Add CSS.
• See the code belwo and copy and paste it into the Add Custom CSS box (as shown in the snapshot below). Keep it on TWO lines though (I had to break it to three lines to fit it in my post)!

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



 
 
Click Image to View Larger Shot

NOTE: In the snapshot, notice I added 
margin-bottom:20px; which actually 
increases space at the bottom of the nav bar and  
other elements of your blog.

We will be reviewing CSS in my upcoming "What You Need to Know" webinars!!!! 
Be sure to take this survey!

• Click Apply To Blog (green button in the upper, right corner of your screen).
• Click Back to Blogger to exit the Template Designer.
• View Blog to view the new centered nav bar.
• You're done!

Related Articles:

• You may also build your own custom navigational bar in Blogger.
• In Typepad, you may also center and tweak the built-in Nav Bar.
• Let me build you a dropdown menu in Blogger or Typepad.
• Use beautiful, clickable buttons in your actual banner!

Blogging should be fun, let me help you!
Heather Wright-Porto
www.BlogsByHeather.com