Blogspot How To: Create a Beautiful Header Using Patterns

Patterns are small images which can repeat in the background. They are small in size and create an awesome background. In this simple tutorial, I'll show you how you can add a pattern in your header background to make it more beautiful and eye-catching.

Steps

1- Find a free pattern of your choice from some quality site like DinPattern.

2- The patterns might come as a .zip file. Extract the .zip file through 7-Zip and then upload the pattern on Blogger (Need Help?) and get the address/URL of that image.

3- Go to Design and then Edit HTML tab. Find this code:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

4- Now, you can add the background pattern in the above code. To do that, change the above code with the following one:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(Paste the address of the pattern you uploaded in Step 2 here);
}

I've uploaded a sample pattern to demonstrate the result. The code for my example is:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(http://www.dinpattern.com/tiles/indian-summer.gif);
}

And the result is something like this:

Need My Help?

If you can't find the above code or have some other problem, feel free to leave me a comment.

Add More Widgets Under Header

In default Blogger templates, you can't add another widget under Header widget. A lot of people would like to add Adsense, a search box, a translator or a horizontal menu under header, so you need to change some default code to do that.

This is a typical view of Layout | Page Elements section.

Steps

To create Add a Gadget option under Header widget, follow these steps:

1- Go to Layout | Edit HTML.

2- Find the following code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Copy Mafia Template (Header)' type='Header'/>
</b:section>
</div>

Tip: You can find this code some lines after <body> tag.

3- Now make two changes in the above code, change maxwidgets='1' to maxwidgets='3' and showaddelement='no' to showaddelement='yes'. Now, the code should look like this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Copy Mafia Template (Header)' type='Header'/>
</b:section>
</div>

Info: I've changed maxwidgets='1' to maxwidgets='3' which means you can add 3 widgets in Header section. A Header widget is there by default so actually 3 means 2 more widgets.

4- Save your template and go to Page Elements tab to see the changes.

Beginner's Guide to Customize Blogger Header

What We'll Do?

Our objective is to change the outlook of our header as well as play with the header widget itself.

The Default Code

In your Blogger CSS, the header is defined by the following piece of code:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Understanding the Default Code

-> #header-wrapper describes overall look of your header.

-> #header will describe the overall look of your blog title and description.

-> #header h1 specifically describes your blog title.

-> #header .description will be responsible for the description of your blog.

-> #header img will become affective if you're using an image as your blog title.

Understood the Default Code? Start Making it Tasty!

I'm changing the overall look of header by making modifications in #header-wrapper.

-> To change the width of your header increase the value of width in #header-wrapper from 660px to a higher number i.e. 750px and see the preview.

-> To add color in the background, you can add background-color:#000000; in #header-wrapper. Please note that #000000 is hex code of black color, you can change it with your desirable code. To easily capture colors on web or on your computer, please download a free program ColorPic from here.

-> Our header border is a thin solid line and it is defined by border:1px solid $bordercolor; in #header-wrapper. If you want to change the thickness of your border, change 1px to 2px and preview. You can also create a dotted line border by replacing solid with dotted. Last thing you can do is to change color of your border, you need to replace $bordercolor with #FF0000. Please note that #FF0000 is the hex code for Red color.

Now I'll try to change the appearance of blog title.

-> The blog title is defined by #header h1.

-> Currently the line-height is 1.2em, change it to 1.5em and you'll see that the space occupied by blog title has increased. Please note that this setting will not affect the font size.

-> Now lets try to change the size of the font. We need to add a new tag in #header h1 which is font-size:15px; and then see the preview, if font size is small increase the 15px otherwise decrease it.

-> To change the font of your blog title, you need to replace font: $pagetitlefont; with font-family: arial, "lucida console", sans-serif; now your blog title will appear in Arial font. I'm adding 3 fonts because your visitor might not have Arial font available on his/her computer then 2nd font can be used.

-> By default, your blog title will appear in uppercase because of text-transform:uppercase; property. Change uppercase to lowercase and then the title will become lowercase. If you don't want both uppercase or lowercase, you can remove text-transform:uppercase;.

-> Last property is letter-spacing:.2em; it defines the spacing between two alphabets. You can increase it (.3em, .4em, .5em) or simply remove it and see the preview.

Add more widgets around header in 'page elements' section.

By default, you can't add any widget around your header because there's no "Add a Gadget" option beneath or above your header. So, lets add that option by ourself.

The default header widget code in 'edit html' section.

First of all we must know the default code, only then we can play with it. If you'll go to "Edit HTML" tab and search for <body> you'll find some code like this some lines after <body> tag...

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger FAQs | Premium Blogger Templates, Tutorials, Hacks, Tips &amp;amp; Tricks. (Header)' type='Header'/>
</b:section>
</div>

Change the header widget code.

All we need to do is to change the value of 'maxwidgets' from '1' to '3' and 'showaddelement' from 'no' to 'yes' and now the code should look something like this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger FAQs | Premium Blogger Templates, Tutorials, Hacks, Tips &amp;amp; Tricks. (Header)' type='Header'/>
</b:section>
</div>

What I've done is that I've increased the maximum number of widgets that can be installed around our header (maxwidgets='3') and I've also made the option of "Add a Widget" available in your header (showaddelement='yes') you need to save the template here and go to the "Page Elements" section to see the results.

Why it is good to have more widgets around header?

This is an obvious question and the answer is very simple. Your header is the first area where an incoming visitor will look so you can have an Adsense ad, a search engine, a translator or any other important widget in your header.

How to Add Image in Header Background

Introduction!

Blogger default templates don't have images in the header background. You can add one that suits your taste by changing some style sheet elements in your "Edit HTML" tab between <b:skin> and </b:skin>.

How to Do This???

Please note that following code is responsible for overall header appearance:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

We can change this code by adding some additional tags. So, find the above code in your template style sheet and replace it with the following code:

#header {
width:660px; /* width of header in pixels */
margin:0 auto 10px; /* margin from other elements like posts and sidebar */
border:1px solid #ccc; /* width, type and color of header border */
background: #fff url(YOUR IMAGE URL) no-repeat top right; /* top right indicates background position */
}

You can do changes and see what happens in "Preview" mode. Just change "YOUR IMAGE URL" with actual URL of your image which you want to use as background. You can always try to search for more backgrounds on Google.

Tip!

Always save your template whenever you're not sure about what you're doing. You can do this by clicking on "Download Full Template" link in "Edit HTML" tab.

How to Change Header Title Font, Size & Color

Intro!

This is a simple Blogger tut to tell you how to change the header title font. First of all, you should know which CSS code is responsible for your header title appearance:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

How to modify the style???


Now you know the CSS of your title. You can make modifications in it and see your results. Remember, these CSS changes will be visible only on main page because your header title behaves as a link in all other pages. First, let's customize it's appearance on main page.

----------------------------------------------------------------------------------
=> Add a 'font-family' Property!
----------------------------------------------------------------------------------

I want my header title to be in 'Arial' font, the code will be:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: arial, "lucida console", sans-serif;
}

Please note that I'm using 3 fonts (arial, "lucida console", sans-serif) in the above CSS. The reason is that if 'Arial' is not available on your visitor's pc then the font on 2nd position ("lucida console") will be used.

----------------------------------------------------------------------------------
=> Add Style Definitions for Header Title Font on Pages Other Than Main Page!
----------------------------------------------------------------------------------

As I told you before that your header title works as a hyperlink in all other pages of your blog other than the main page, so let's add some more CSS to customize the appearance on pages other than the main page.

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

/* I've added a new tag which will change header title appearance on pages other than main page */

#header h1 a {
text-decoration:none; /* you can add 'underline' or 'overline' instead of 'none' */
color: #FFFFFF; /* you can add any color you want by changing 'FFFFFF' */
font-size: 25px; /* means title font size will be 25px on all pages other than the main page */
}

/* hover definitions will become alive when you bring mouse over title, this will also work on all pages other than main page */

#header h1 a:hover {
text-decoration:underline; /* title font will be underlined on mouse over */
color: #000000; /* title will become black on mouse over */
font-size: 10px; /* guess what will happen to font size on mouse over */
}

Good to Know!

I always try my best to share all the knowledge I've with you guys. You can always do experiments and share your results with me in comments. You should go to W3Schools.Org to read more about font properties.

How to Remove Header Borders in Minima Blogger Template

This is a really quick and easy trick. Whenever, someone creates a new blog, Blogger automatically chooses Minima Blogger Template by default. I really love this minimal template but the border lines around header doesn't make any sense. So, in this tutorial, Ill tell you how you can very easily remove the border lines around header.

Steps to Remove Borders Around Header/Title

1- Just go to Layout and then Edit HTML tab.

2- Find this code:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

3- Delete the two lines from the above code which are border: 1px solid $bordercolor; and again border:1px solid $bordercolor;. After that, the code should look something like this:

#header-wrapper {
width:660px;
margin:0 auto 10px;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: center;
color:$pagetitlecolor;
}

4- Preview your template and save if happy with the results.

Blogspot Tutorial: How to Add Adsense Ads Below Header

Inserting Adsense code in your Blogger-Blogspot header can be really beneficial. When a visitor comes to your site, he or she will definitely look at your header and then it's your turn to cash that first look. Just follow the steps below.

Lets Do Some Coding Work!

1- Go to Design and then Edit HTML tab.

2- Backup your current layout.

3- Don't check Expand Widget Templates.

4- Find the code given below. You can find it just after </head> tag:

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="false" title="Blogger FAQs(Header)" type="Header">
</b:widget>
</b:section></div>

The above code could be a little different but you'll definitely find a similar code in your template. If you're totally confused then feel free to ask for help.

6- In the above code change maxwidgets="1" to maxwidgets="2". Also change showaddelement="no" to showaddelement="yes" and save your template.

7- Now go to the Page Elements tab and there you'll see that you can add another widget in your header.

8- Insert your Adsense code there and make more money.

Wanna Support Beta Templates?

Beta Templates have been helping folks for a while now without asking anything in return. However, if you wanna help us then simply add our link anywhere in your blog. Instructions for adding link can be found at the bottom of this page.