How to modify blogger header size in two columns

By this useful article you teach that How to modify blogger header size in two columns. In this regard lot of visitors and other readers email me about changing of blogger header in two columns and sections, because more visitors interested that they want to insert logo of blogger blog and also want to run slide show in the header of the blogger blog. One my friend said that he has searched lot of articles online but very difficulty to understand it. You can also change and read more about cute blogger header,blogger header design, blogger header image, tutorial blog blogger,header image beside blog title,change blogger header.

Now to see the requirement of the readers and friends I have prepared some codes in this regard. Now the question is that how to split your template's header into two columns so that you can insert your widgets along with your blog's badge (logo) accordingly. In my experience I have checked that blogger did not maintain option of split header in two columns. Now I will have used good technique to blogger template alongwith some useful codes, you are ready now to split header columns, but remember one important thing that download your blogger template and save your backup any place of your computer start practice first and if you success in this regard you can continue.

After that follow my instructions and look your free blog blogger header more beautiful in two columns by the magic of some codes. Look the following easy steps and suggestions:

1. Go to www.blogger.com and then log in to your blogger dashboard and after that  go to Design and select Edit HTML. Now search the following code in your blogger template:

#header-wrapper {

width:950px;

margin:0 auto 0px;

height:180px;

}

#header-inner {

width:950px;

background-position: center;

margin-$startSide: auto;

margin-$endSide: auto;

}

#header {

margin: 0px;

text-align: left;

color:$pagetitlecolor;

}

2. It is done now you should be change the above code with following code with carefully.

#header-wrapper {

width:950px;

margin:0 auto 0px;

height:180px;

}

 #head-inner {

width:650px;

background-position: left;

margin-left: auto;

margin-right: auto;

float:left;

}

 #header {

margin: 0px;

text-align: left;

color:#fffff;

}

 #r_head{

width:350px;

float:left;

padding-top:10px;

}

3.  This practice is not complete now once again search the following code in your blogger template:

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

4. Replace the above code with following code carefully.

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

5. Now you are done and save your blogger tempate and enjoy with two column blogger headers.

I hope the above article will be very useful for you, if you like it please leave your comments:

How to make cute blogger header

By this useful article you will teach that how to make cute blogger header. Really this is very great fun and magic. If your free blog blogger header is beautiful your visitors comes time to time because blogger header is important, you have listened the adage that (first impression is last impression). Some blogger headers give ugly look  and you feel that your blogger header is necessary to modify  now you can change it easily. In my long experience in the field of blogging I have checked that beautiful blogger headers to increase blogger traffic accordingly and also better for SEO. If want to read more about blogger headers like:blogger header size
blogger header design, blogger header image, blogger header blog, tutorial blog blogger, header image beside blog title, change blogger header.

You can use some popular software to make your new blog header like CORELDRAW, PHOTOSHOP and GIMP are very useful. One thing is important, you want to change width of your blogger headers no problem this article will make it easy for you. Before doing this see your blogger template HTML and check width of your free blog blogger header if you are not satisfy from it and want to change, make sure that you have reserved backup of your existing template before doing anything. Now in case something goes wrong and you require showing displeasure your current template back in place instead. Now search the following section code in your current blogger template.

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

What changes do you made in above section code the elements highlighted in green colours look at the following with carefully.

1.    Modify maxwidgets='1' to at least 2 in order to be able to put in one more element in the header section.

2.    Adjust showaddelement='no' to showaddelement='yes' to be able to put in a special element to the header section.

3.    Restore locked='true' with locked='false' as a result that you can later on take out the old header.

Currently save your template and go back to the layouts section in free blog blogger dashboard. You will perceive that you can at present insert another element to your blog header. If you only desire to insert your new blog header, and do not want to have this linked to your home page, you can simply do this by preferring to insert a "Picture" element to your free blog blogger and uploading your new header easily.

Now this is very easy if you wish to choose link of your free blog blogger header to your homepage you will do a little work first. Upload your image online free home hosting site, there is lot of sites available but I have found very nice and good image hosting site http://www.freeimagehosting.net . This site will support you to make html code for your free blog blogger header image. If you have succeeded to make the image  URL ,  after that  image will be looking like this:

<img src="http://www.yoursite.com/images/yourimage.jpg"> 

Now important this is that replace the image source with your own image address.  This is the code desirable to show your new blog header. Create this image turn into a link back to your free blog blogger home page. For more guidance look at the following code:

<a href="http://yourblogaddress.blogspot.com"><img src="http://www.yoursite.com/images/yourimage.jpg"></a>

Now save this element and view your free blog blogger.  After that you will see both the original blogger header and your new blogger header. Keep in mind that your new blogger header appears the way you desire it to, and then go back to edit the layout. This time, click on the "header" element of your  original blogger header, and select  "remove page element". Once you perform this, the original header will be totally removed, leaving only your customized blogger header, now enjoy with your customized blogger header.

In view of the above method and also another easy and simple way to make your free blog blogger header attractive for better SEO read following main points and instructions.

There is lot of patterns and images are available online during the search I have found very nice and useful patterns and small images which can go over in the background. They are small in size and create an awesome background.  Find a free pattern of your choice from  this  site http://www.dinpattern.com. If you have any problem of zip file you should unzip with any suitable software and then upload pattern easily.

1. Go to www.blogger.com and then select  Design and  after that  Edit HTML tab. Find the following code in your free blog blogger templates:

#header-wrapper {
   background: #222222;
   width: 840px;
   height: 150px;
   font-size: 11px;
   margin: 0px auto;
   padding: 0px;
   overflow: hidden;
}


2. This is very necessary that you can insert  the background pattern in the above code. Now I advice that modify above code with following code carefully.

#header-wrapper {
   background: #222222;
   width: 840px;
   height: 150px;
   font-size: 11px;
   margin: 0px auto;
   padding: 0px;   overflow: hidden;
background: url(Paste the address of the pattern here);
}




In view of the above code change  above green lines with following codes green lines the result will be  change with image URL  I have taken for my blogger header.

#header-wrapper {
width:660px;
#header-wrapper {
   background: #222222;
   width: 840px;
   height: 150px;
   font-size: 11px;
   margin: 0px auto;
   padding: 0px;
   overflow: hidden;
background: url(http://media.smashingmagazine.com/cdn

_smash/images/header-contest/full/fireball.jpg);
}

Now look at  the above code the image URL in green colour  will show  your selected image in free blog blogger header. See the result as a sample has give below:

If you like this article please leave your comments.