Tuesday, July 29, 2014

Emily's Super Easy Guide to Centering Your Blog Header!

I'm back at it again, giving you a few little tips and tricks to make your blog shine! Coding is so important for a chic and streamlined blog design however sometimes it can be a real hassle and cause a lot of stress to make sure that you get everything working just perfectly! I've posted before about {how to create a custom Pinterest hover button} to help some of you deal with a bit of this tricky coding. I know a lot of people had success with my first tutorial so I decided to give it another whirl! Today is all about one simple line of code that can make a huge difference in the appearance of your blog! I'm going to teach you in THREE super easy steps how to center your blog header!

Once again, this only applies to those using the blogger platform! I promise, if you could follow along with the Pinterest hover button tutorial, this is going to be a piece of cake! Here we go!

One, Upload File

Go ahead an upload your blog image as you would regularly by going to Edit Template, Header and then Choosing a File. You have the option to choose your preferred placement of "Behind Title and Description", "Instead of Title and Description" or "Have Description Placed After the Image". I chose to have one solid header image "Instead of Title and Description" but it's all up to you. Click Save and we'll keep rolling!

Two, Pick Your Code

Based on what placement you chose for your image (in the step above) you're going to have a different code. The options are below:

Instead of Title and Description // #header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

Behind Title and Description // #header-inner {background-position: center !important; width: 100% !important;}

Three, Put it all Together!

Go back to your Blogger Dashboard and open TemplateCustomizeAdvanced, and then Add CSS. Here, paste the code that you decided on above. Hit the Enter key after you have pasted this snippet and then Save and Apply your changes.

Head back to your blog and see your newly centered masterpiece! Hope this tutorial helped you all! Let me know if you had any success or if there are any other blog tutorials that you would like me to show!


No comments:

Post a Comment