Divide Blogger Header to add Ad banner, Adsense or search box

How to put Google adsense into the header of my blogger blog? This gave me time for me to master when i saw it at other blogs. 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 -->Template-->Edit Html

•   Then you'll find an instruction which says, "Directly editing HTML may affect....." Press "PROCEED." 
• . 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='YOUR_BLOG_NAME(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.