How to design your Blogger

Installing your header

Step 1: Match the width of your blog with the width of your header image

Go to blogger dashboard → Template → Customize (Blogger Template Designer) → Adjust width.

For example, my image width is 1100px, so I adjusted the width to 1100px. 

Then hit Apply to Blog. Then go back to blogger dashboard

Step 2: Upload your Image

Go to layout. Look for the Header which is you Blog title. Click edit. Choose file from your computer then go to the folder where your header image was saved. Check the Instead of title and description option and then Save.

Step 3: Go to Template → Customize → Advanced → Background. Change Main Background and Header background to transparent. You could also change the Outer Background. Then apply to blog. It will look like this:

As you can see, I changed the outer, main and header background. And do you notice the header image? It is not fully fit to my header but we will fix that in Step 4.

Step 4: Go to Template → Edit HTML. Search for content.padding.horizontal (cmd + f on mac / ctrl + f on windows).

Change 40px to 0px. Then Save template. You could click Preview template to see that your header is already fit. Now you could add background to your content area.

Step 5: To add background to your content area, click Edit template then search for main-outer, it is place under columns. Under main-outer, you will see this:

border-top: $(main.border.width) solid $(body.rule.color);

Delete that. Then type this:

background: #ffffff;

#ffffff is white but if you want other color, copy the color code in photoshop or go to template → customize → advanced → background to choose color and copy the code. If you want to put border, type:

border-right: 10px solid #000000;
border-left: 10px solid #000000;
border-bottom: 10px solid #000000; 

Change 10px for your desired thickness, and #0000 for your desired border color. Since my background is white, I just code like this:

Step 6: Go to Template → Customize → Advanced → Tab Background. Change Background color and Selected color. You could also change size and font style. If you have border in your content area and also you want to add border on menu bar, go to Add CSS and type:

.tabs-inner {

border-left: 10px solid #000000;

border-right: 10px solid #000000;

}

Click Apply to Blog.

I hope this post could help you in a simple way to start your blog design. Don't forget to leave your comments below.

Share this: