Lets Talk About: How To Center Your Blogger Header Image /Font

Tags

Like i said in one of my previous post that your blog homepage is like front of  your house, of how you arrange it will determine how people will describe it. So today am going to help you get it arrange professional, and we are going to take it one by one. The reason for that is to make sure you
get every details along the way. So without wasting much time we are going to start with the header.

You will agree with me that the of a website that include blog is what really distinguishes it from others is like what gurus calls your identity or digital fingerprint. The reason for that is not far fetch since is clear that whenever a visitor accesses your blog for the first time, the header is one major aspect that is used to determine who you are and the type of content that they can expect to read. It's therefore every important to create a header that is both prominently placed and conclusion of your quine brand name.

It would have be simple if not to shift if not that the idea is default Blogger settings for header positioning. I believe you have also notice that whenever you upload a header to your site, it will automatically be aligned to the left of the page. By default that is how is being set. Though some Blogger users may i believe are okay with this setting, more especially if they are using a header design that doesn't contain a background. But others on the other hand may find that their background headers appear cut off, incomplete, or even indistinguishable from the rest of their content.

Now If you find yourself in the second category of users, just hold on, there is a way to adjust the positioning of your header so that it will display as a center Blogger header. The true is that by centering your site header, you have greater flexibility over the overall design, whether you agree or not is a simple true, and also it allows you to really shine light on your content. It's very hard if you ask me to miss a header that is placed smack dab in the middle of the screen on every page that visitor navigates to.

Making this change is very very easy and simple, first you'll be able to make certain adjustment on every page of your blog without having to change them one by one. In-fact all you need to do is to modify the CSS of your blog which can be found directly through your blogger dashboard. Like i did promise early am going to be holding you hand in hand to achieve this. Meaning even if you have little to no experience in web design, that is HTML , you can still center your blog header by inserting some code inside the CSS box as simple as that. Below are the steps to follow.

First Step  Log in into your Blogger Account with your username and password, and select your blog, then scroll down to "Template" and click on "Customize" button just before EDIT HTML button Scroll down again to "Advanced" you will see last last there "Add CSS" tab and paste the code below inside the empty box:

#header-inner {
background-position: center !important; 
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}
If you have a small image and you want it to become full width, add this CSS instead:
#header-inner {
 background-size: cover;
 width: 100% !important;
 text-align: center;
 }
 #header-inner img {
 width: 100%;
 height: 100%;
 }


Once you have done that Press/Hit the ENTER key after you paste the code snippet, then click the "Apply to Blog" button. 
But if is just something you wrote maybe like WELCOME TO MY BLOG or any of such use the code below and follow the same procedure  above 

#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}

Okay sure you have done that. Good. Here are some other aligning options for your headers: Align Blogger Header Banner and Text Side by Side Image on the right and title on the left use this code:

#header-inner {
background-position: right !important; 
width: 100% !important;
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}

If you want Image on the left and title on the right use this code 

#header-inner {
background-position: left !important; 
width: 100% !important;
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
Remember: for larger images, you may have to resize them if you want them to appear side by side with text.

After making the CSS changes save your modifications very important, then go back to your homepage and refresh the page. You will notice the header is now centered., instead of on the left. Also click on some of your pages links and make sure that this change has been made to every page or post on your blog. But if by chance you notice there's no change, kindly go through the code you modified and make sure that you copied and pasted the code into the box exactly as stated above.

Believe me minor modification in the code, or a missing semicolon will cause it to fail or make the changes you want to achieve, or even come up with a different result than what you expected
One thing i love about CSS is the fact that it's your blog site's central hub for all design. In the next post i will be showing you how you can modify just about any appearance on your site to give the blog a custom look and feel. Honestly once you're comfortable performing minor adjustments to the appearance of your site, you can start to get creative and come up with your very own modifications or adjustment is as simple as that. 

If you still have any question about all i wrote in this post use the comment box and i will do my best to have them answered.

Lets Talk About It! Join Me Please
EmoticonEmoticon