Upload and Center Your Header Banner with Blogspot Default Template

Recently, I discussed about making professional banners with transparent backgrounds without Photoshop, and I also mentioned that blog customization must be done with your separate blog, we called it - 'Test Blog'.

Now, let's begin the experiment, and we will start it at our test blog header. I expect that you already have your header banner with you.

Reminder: This is more about 'experiment', a lot more on what you can do at the 'Blog Template Designer'. Anyway, this blog is about the simplified way on doing the tricky part of making your blog a lot more customize and professional looking, like we got here!

Objective: To center the header banner of your blog using a blogger default template.

If you are done making your header banner and want to see it on the center of your blog, then we can do that easily.

Steps:

1. Upload your header banner as "Instead of Title and Description".
2. When you are done, view your blog, by default your header will be seen on the left.

3. Now, let's move it to the center. Got to your Template >> Edit HTML, check Expand Widget Templates and find this code by pressing Control and F of your keyboard:
.header-inner
Copy the next codes:
.header-inner img {margin: 0 auto !important;}
.header-inner {text-align:center !important;}
Paste the above codes here as shown below:
.header-inner .Header .descriptionwrapper {padding: 0 $(header.padding);
}
.header-inner img {margin: 0 auto !important;}
.header-inner {text-align:center !important;}

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {border-top: $(header.bottom.border.size) solid $(tabs.border.color); }
4. Save your template, view your template. Perfect?

Argument:

Some known tutorials told you to put some customizations before ]]></b:skin>, well, I also put many codes just before ]]></b:skin> to customize the looks of my blog. The problem arised when you are going to check the organization of your HTML codes.

If you want to work with your HTML codes neat and tidy, definitely you need to put extra effort putting customization to the right places.

More Guidance:

• When you codes doesn't look exactly familiar, look for .header-inner or #header-inner and fine the last closing }, be guided by the demonstration below:
.header-inner .Header .descriptionwrapper {padding: 0 $(header.padding);
}
.header-inner img {margin: 0 auto !important;}
.header-inner {text-align:center !important;}

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {border-top: $(header.bottom.border.size) solid $(tabs.border.color); }
• If your codes start with #, do this:
#header-inner .Header .descriptionwrapper {padding: 0 $(header.padding);
}
#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}

/* Tabs ----------------------------------------------- */
#tabs-inner .section:first-child {border-top: $(header.bottom.border.size) solid $(tabs.border.color); }

Are we done? Please do not hesitate asking for help...

Share it Please

Tweet

Prime Aque

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.