I shared this blogger tutorial on my friend Pamela's blog PB&J Stories this week and I am posting it up here in case you missed it! If you would like to view all of my blogger tutorials either click here or just click the "tutorials" button up on my nice and centered navigation bar! ;)
Let's begin with the super simple blogger tutorial:
I don't know how many of you use the blogger default page links. You might have a custom navigation bar installed so this will not work for you but if you use the default one from Blogger and you hate that Blogger automatically places all your links to your left, then this tutorial is for you! I used to have a custom navigation bar but adding/deleting pages to a custom bar is such a pain! So I decided to go with the default for myself and I centered it to make it look just right! This is a super easy tutorial, no need to mess with your EDIT HTML page!
Here is what you do:
Go to the "Template Designer" tab within Blogger. Select the "Advanced" tab and then the "Add CSS" then paste the following code:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
If you are happy with what you see in the preview section, then hit "Apply to Blog" and your changes will be saved! If you don't see any changes in your preview section, try hitting the enter/return button after pasting your code. If that doesn't work, then you probably have a custom navigation bar or it is hidden. I just love seeing everything nice and centered in a blog, don't you? Let me know if this tutorial was helpful!
Cindy, Thank you for sharing this but I have a question. I do have the CSS in my blog template but I've added another page and now they are centered across with the one page underneath my other pages. Help!?! Does it have something to do with padding? Where would I find the padding for my "Pages" element in Blogger? Here is my blog: www.EmmeAndMe.blogspot.com Thanks for any and all help you can give me =) Kristy
Thank you for this! I've been trying to figure out how to center my navigation bar and you made it so easy. Is there a way to make your pages/links more or less spread out on the navigation bar?
I wish this worked for me but it doesn't :( I've tried other codes that center the text in the sidebars and those work but for some reason this code doesnt work
PHOTOS + CONTENT:
Please DO NOT use any photographs or content from my blog without permission and proper credit.
DISCLOSURE: I received one or more of the products or services mentioned in some of my posts for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”
Thanks for sharing this. I couldn't believe how simple it was!
ReplyDeleteYES!!! YOU ARE A GOD. I have been trying to do this for hours!!
ReplyDeleteCindy,
ReplyDeleteThank you for sharing this but I have a question. I do have the CSS in my blog template but I've added another page and now they are centered across with the one page underneath my other pages. Help!?! Does it have something to do with padding? Where would I find the padding for my "Pages" element in Blogger? Here is my blog: www.EmmeAndMe.blogspot.com
Thanks for any and all help you can give me =)
Kristy
Thank you so much…I love when fiddling with CSS actually works for me!
ReplyDeleteYou are awesome! I have been looking for an answer for this and every other one I found was a bit touchy. Thanks! :)
ReplyDeleteThank you so much. I'm trying to work on a customized blogger layout for a friend and you've made it super easy! Thanks for your time!
ReplyDeleteThank you for this! I've been trying to figure out how to center my navigation bar and you made it so easy. Is there a way to make your pages/links more or less spread out on the navigation bar?
ReplyDeleteSeriously, I have been trying to find out how to do this for over a week. This was so simple! Thank, thank, thank you!!
ReplyDeleteDanielle
stylizingit.blogspot.com
Wow, that was so easy!! Thanks for the tip!
ReplyDeleteThank you!! Been trying to work out how to do that and it was really annoying me! x
ReplyDeleteIt doesn't work...:-(
ReplyDeleteit didn't work for me either :(
ReplyDeleteyou are a genius! thanks so much x
ReplyDeleteOMG I've tried at least 30 other codes and this one worked thanks so much
ReplyDeleteRaven
www.swankstylista.com
huh it doesnt work
ReplyDeleteThank you!!
ReplyDeleteThis isn't working for me :(
ReplyDeleteI wish this worked for me but it doesn't :( I've tried other codes that center the text in the sidebars and those work but for some reason this code doesnt work
ReplyDeleteOMG it worked for me thank u so much!
ReplyDeleteit doesn't work on mine :(
ReplyDeleteIt worked thank you so much xx
ReplyDeletewww.beautiliciousd.blogspot.com