Split bloggers header in 2 columns Update

Χωρίστε την επικεφαλίδα του blogger ( blogger header ) σε 2 τμήματα Για το Νεο Blogger- Updated !

Όπως θα έχετε παρατηρήσει η επικεφαλίδα μου είναι χωρισμένη σε 2 τμήματα .

Από την μια μεριά είναι η επικεφαλίδα του blog μου και από την άλλη μεριά είναι έξτρα χώρος , όπου μπορώ να προσθέσω κάποιο HTML/ javascript Widget η κάποιο banner .
(Δούλεψε κανονικά και ο κώδικας χωρίς αλλαγές)

  Ένα άλλο που δούλεψε κανονικά με τον ΝΕΟ ΚΩΔΙΚΑ του BLOGGER, με κάποιες αλλαγές που έκανα είναι:

Search for the following code in your template

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

If maxwidgets='1' change it with more than 2, eg. '5' 

(In the same time, If you want now, you can change and the showaddelement= from 'no' to 'yes', if you add gadgets later in this header part)
  
Just below the above code, paste the following code

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

It should look like this

<b:section class='header' id='header' maxwidgets='5' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tweak My  Blogger (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Now search your template for the following code 

]]></b:skin>

Add the following code just above ]]></b:skin>

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

With this code every Gadget below Header will be in the midle of the header width that you choose.

I change the above code (I deleted the body#layout from the last 2), and I change float: left and only one padding 15px with this   

#header {display:inline-block;_float:left;}
#header-right {display:inline-block;float:left;padding:15px;}
#header-right .widget {margin:0;}
#header {width: 50%;}
#header-right {width: 50%;}

 and now with this code every Gadget below Header will be on the left of the header width that you choose.
 
Now search your template for 

]]> </b:template-skin>

and just above that, paste the following code

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

 I change the above code with the following because it doesn't work with the new blogger
 I, paste the following code

#header {width: 77%; float: left;}
#header-right {width: 20%; float: left;}

 You must change the width in -3 from your desirable, because it doesn't fit the two columns of header in the same row.


Last step, SAVE TEMPLATE and then go to page elements to see that your header has been spitted into two columns. 

Source and credit : http://www.theinfow.com/2011/03/split-header-into-two-columns-blogger.html

http://sohonetwork.blogspot.gr/2011/04/split-bloggers-header-in-2-columns.html