How to Link Blogger Header to Another Site

Adding custom link to Blogger header :

By default your blogger header is linked to your blogger home page. If you click on your Blogger blog header, then it will redirect to home page of your blog.  We can change your Blogger header redirection to another url. In Blogger it is possible to link your Blogger header to your site or other webpage.

Getting back link from header will increase your blog traffic. If you add your blog link to some one's or your own blog ,  it will really increase your blog traffic and page rank also. In this post I'm going to show you how to add a link to your Blogger header. After linking your Blogger to another site, when you click on your Blogger header then it will go to another web site(which you added to your Blogger header).

How to Link Blogger Header to Another Site :

By doing small changes on your Blogger template we can easily add link to Blogger header. Just find the Blogger header redirection code on your Blogger template and add custom link in the place of home of url.

Follow below steps to add a custom link to your Blogger header:

Step 1 : Go to Blogger Bashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search for below code

<a expr:href='data:blog.homepageUrl'><data:title/></a>

and change 'data:blog.homepageUrl'  with  'another site url'

Step 5 : Click on Save template.

Now check the changes you applied to your Blogger by simply click on your Blogger header. If it works , it will automatically redirect to custom url which you added to your Blogger header.

Read More

Add Widget/Gadget Inside Blogger Blog Header

How to Add Widget/Gadget Inside Blogger Blog Header :

By default blogger blog header widget will be locked and it has not possible to add widget inside blogger blog header.We can add extra widget inside blogger header.To add widget inside blogger header , we need to set yes on showaddelement on header section and unlock header widget and do some changes .

follow below steps to add widget/gadget inside blogger blog header

step 1 : go to blogger dashboard

step 2 : click on template

step 3 : click on edit html and tick expand widget templates

step 4 : find below line in template code

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

and chanage showaddelement='no' to 'yes' and increase maxwidgets='2'

i.e <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>



now gadget added inside blogger header, but header gadget will not move to any where because it's locked. So we need to unlock header widget to change widget position.

see below code in template , it will appear after above code

<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'>

replace above code with below code

<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'>
 
step 5 : click on save template

now click on layout , now you can see extra widget on your blogger blog header.

Read More

Add a Widget/Gadget on right side of blogger header

How to Add Widget/Gadget on right side of blogger header :

suppose if you want to add banner or any search box to the right side of your blogger header, this post will help you.To add banner or any search box to the right side of blogger header , we need to add extra gadget on right side of blogger header.

follow below steps to add Widget/Gadget on right side of blogger header

step 1 : go to blogger dashboard

step 2 : click on template

step 3 : click on edit html and tick expand widget templates

step 4 : find below lines in template code


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='seo (Header)' type='Header'/>
replace with below 2 lines

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>

and paste below lines after above to lines


<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

and the search for  ]]></b:skin> and paste below code above it

#header, body#layout #header {
width:45%;
display:inline-block;
float:left;
}
#header-right, body#layout #header-right {width:30%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}


step 5 : click on save template

now  go to your blogger layout and add a new gadget on header then it will show on right side of your blogger blog header.

Read More

Change Header Size In Blogger

How to change header size in blogger blog:

We can increase or decrease header size in blogger blog.It is easy to adjust size of your blog header in blogger.

follow below steps to change header size in blogger blog

step 1 : go to blogger dashboard

step 2 : click on template

step 3 : click on edit HTML and tick expand widget templates

step 4 : and find below code

/* Header

----------------------------------------------- */

.header-left{

display: inline-block;

height: 30px;

width: 300px;

float: left;

}

.header-right {

display:inline-block;

float:right;

}

and change height and width px value to resize blogger header.if you want increase blogger header increase px value or to decrease blogger header size decrease px value

step 5 : click on save template

Read More

Split blogger header into two columns

How to split Blogger header into two columns :

We can add gadget next to header by splitting header section into two columns on Blogger. It is easy to split blogger header into 2 columns. By dividing Blogger header into 2 columns, We can add any Blogger gadget  next to Blogger header.

Follow below steps to split Blogger header into 2 columns/sections

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Do customization as below

 search below code

<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='your title name (Header)' type='Header'>     

</b:section>

add below code just after above code

<b:section id='header-right' showaddelement='yes'/>

<div style='clear: both;'/>

Again search ]]></b:skin>  , and add below code just above  ]]></b:skin>

#header, body#layout #header {width:45%;display:inline-block;float:left;}

#header-right, body#layout #header-right {width:40%;display:inline-block;float:right;padding:15px;}

#header-right .widget {margin:0;}

And again add below code just above  ]]>   </b:template-skin>

#layout #header {width: 50%; float: left;}

#layout #header-right {width: 50%; float: right;}

Step 5 : Click on Save template.

Now go to your Blogger and click on Layout, now you can see two column header section on your Blogger layout.

Read More