Sunday, January 27, 2013

Blogger DIY - Centering

Some people like to re-arrange furniture and some people like to constantly change their home decor but what I like to do is find DIY ways to change and or customize the look of my blog.  Don't get me wrong I like to change things around at home too, but my space, budget and time is so limited that I don't often get to change the furniture or decor so my creative outlet is primarily limited to my blog! 
Since I am cheap budget conscience, I am always looking for a way to do things myself especially when I know they can or should be able to be done!

The other day I did a quick post about adding a Pinterest Gadget to my blog and today I will tell you how I centered both my Header Image and centered my Page Menu.

Both of these "fixes" are really simple to do!  Let's start with centering your Header Image.  First of all this fix will only work if you have chosen the check box to display your Header Image "Instead of title and description".

You would have done this when uploading your Header Image or it can be changed by going to Layout, then clicking on your Header Image to change it.  Once it is changed so that the check box shows "instead of title and description" you can go to the next step.

You should be in the "Layout Section" of your blog, then click on "Template Designer.
Once you have clicked on Template Designer you will come to a screen that looks like this:
You will need to click on Advanced, which will take you to this screen:
You will then need to click on "Add CSS", which will take you to a screen that looks like this:
 The blank White Box is where you add your custom coding to change things on your blog.

To center your Header Image You need to Copy and Paste this code into the White Box:

#Header1_headerimg {margin:0 auto;}
To Center the Page Titles You need to Copy and Paste this code:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

If you are doing both at the same time your code should look like this:
 Then you want to click on "Apply to Blog" in the upper right corner.  As the changes are happening you will be able to see the the preview of your blog.  Once the changes have been saved you are all done!

That's it for now, I hope this quick tutorial has helped you out!  Please comment to let me know if you used it so I can check out your blog!  If you have a DIY Blogger fix you cannot find or would like help with then post a comment and I will see if I can figure out the "How To" on it - I love a challenge!

Thank you for stopping by The Mix Gal! 
Comments validate my blogging efforts, so I would love to hear from you. 
Take care and Keep Life Simple by Mixing It UP!

No comments:

Post a Comment

Thank you so much for stopping by and visiting The Mix Gal ~ I love to hear from my readers!