Breaking News:

latest

How To Center The Blogger Header Image

Hello and Welcome to GetWebInfo. Here on this post you will learn that How To Center The Blogger Header Image. The header of a website is wh...

Hello and Welcome to GetWebInfo. Here on this post you will learn that How To Center The Blogger Header Image. The header of a website is what distinguished your blog it's your identify or digital fingerprint. Whenever a visitor accesses your blog for the first time, the header is one major aspect that is used to determine with you are and the type of content that they can expect to read.




What would seem to be counterintuitive to the idea is the default Blogger setting for header positioning. Whenever you upload a header to the site. It will automatically be aligned to the left of the page. Some Blogger users may be okay with this setting, Especially if they are using a header design that doesn't contain a background. Others may find that their background headers appear cut off, Incomplete, or indistinguishable from the rest of their content.


Center Header Image With Blogger Template Designer

Making the change is relatively easy. You'll be able to make these adjustments on every page of your Blogger blog without having to change them individually . All you need to do is to modify the CSS of your blog that can be found directly through your Blogger Dashboard. Even if you have little to no experience in web design or coding, you can center Blogger header by following these next few steps.

Step 01: Log in to your Blogger Blog Account and select your blog, then go to "Template" and click the "Customize" button on the right side.



Step 02: Navigation to "Advanced" > "Add CSS' tab and paste the code in 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%;
 }
Step 03: Hit the Enter Button from your keyboard after you paste the code snippet, then click the "Apply Blog" Button from Blogger.


Here are some other aligning option for your headers.


Align Blogger Header Banner and Text Side by Side


Image on the Right and Title on the Left Side

You can also put this code to CSS Box of the Blogger

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

Image On the Left and Title on the right side

#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
Note: For larger images, you may need to resize them in order to make them appear side by side with the text.

After Making all of these changes you can all done. You may navigate back to your homepage. Refresh the page and you 'll notice that the header is now centered. instead of on the left. Click on a few of your page links and make sure that this modification has been made to every page or post on the blog. The great thing about this CSS is that it is your site's central hub for all things design. From the CSS file, you can modify just about any appearance on your site to give the blog a custom look and feel. Once you are comfortable performing minor adjustments to the appearance of your site, you can start to get creative and come up with your very own modification.

If you have any problem about this post so please post comment on this post i will reply you as soon as possible.

No comments