Split Header in 2 by KSB code

Split Header in two

Header is only one widget in the header wrapper.some many of them want to add more widgets in header wrapper it can be possible by increase the count maxwidgets to our required number but so many of them have a doubt that can we divide the widgets in two side by side widgets.yes, this can be possible by using KSB code by sandeep@knocksuperbuzz author. lets have the view the code below.

 

• Log in to your Dashboard > Layout > Edit HTML 

•  Don't click on "Expand Widget Templates"

• Search below code by finding using cltrl+f :

  
  #header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
  } 

• Now replace above code with below code : 

  
  #header {
  float:left;
  width:40%;
  height:200px;
  margin: 0px;
  border: 0px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
  }
  
  #header2{float:left; width:60%; height:200px}
   

• Search below code by finding using cltrl+f :

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

• Now replace this code with below code

   |----knocksuperbuzz.blogspot.com------>

  <div id='header-wrapper'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
  </b:section>
  
  <b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
  <div style='clear:both;'/>
  </div><!-- end header-wrapper -->

• Now save your template and your done

   

  Thanks for using knocksuperbuzz.blogspot.com if you like this post comment and subscribe.