How to split into two a blogger header

How to put Google adsense into the header of my blogger blog? I took these notes and shared with you for those that work with Simple blogger template, as it is the basis of my tests.


Note: Back up your template's HTML code first.

STEP 1. Go to blogger DASHBOARD -> TEMPLATE -> EDIT HTML

a. Then you'll find an instruction which says, "Directly editing HTML may affect....." Press "PROCEED." 

b. Tick on "EXPAND WIDGET TEMPLATE."

STEP 2. Press CTRL F then copy and paste the following at the "get prompt" located at the upper right corner of the screen: 

<b:section class='header'

You'll then find the following code:


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

STEP 3. Paste the following code right after </b:section>

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

The code, after pasting, will look like this. 

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='By This Word(Header)' type='Header'/> 
</b:section> 
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

STEP 4. Press CTRL F then paste ]]></b:skin> as what you did above, to see where this code is located in your blog's HTML. 

STEP 5. Paste the following code before ]]></b:skin>

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

Press SAVE TEMPLATE. You're done.

Go to LAYOUT and try to add an adsense widget at the HEADER portion of the blog's layout.

Thanks.

Related Topics

How to display author's name in blogger under post title?
How to hide blog description in blogger?

How to add horizontal navigation bar in blogger?