Since the template changes, respectively Dexterity Blog readers had increased than before. It is a source of encouragement to the new post is updated. Please thank your readers for supporting blog last time. Hope you continue to monitor the content posted here soon.

Back to this article, today we will split into 2 parts of the blog header with the size option. Here Minima template is taken as examples. To be clear, you can create a new blog and work under the guidance below:

Step 1. Edit the body. Sign in Blogger, choose Layout (Layout) | HTML Edit (Edit HTML) and note the code below:

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

This is the header at the top with equal horizontal dimensions of the template. Suppose we need to put a search box to the right, so you must change the code above with:

<div id='header-wrapper'> / * header-wrapper cover both parts * /
<div id='header'> / * left side * /
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header | Tips blog (Header)' type='Header'/>
</ B: section>
</ div>
<div id='box'> / * right part * /
<b:section class='searchbox' id='searchbox' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML99' locked='false' title='' type='HTML'/>
</ B: section>
</ Div>
</ Div>

In the above code has created a utility to add HTML and id: box, searchbox. You can set custom names as long as this name should coincide with the feast of its newspapers in the CSS in step 2.

Step 2. Edit CSS. Now drag the slider up on your search:

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

We will replace it with:

# Header {
  float: left; / * Located on the left, you can use: float: $ startSide * /
  width: 310px; / * Size of the logo of the blog * /
  margin: 5px;
  border: 1px solid $ bordercolor;
  text-align: center;
  color: $ pagetitlecolor;
}

# Box {
  float: right; / * Located on the right, you can use: float: $ endSide * /
  width: 320px; / * Size of box * /
  margin: 5px;
  border: 1px solid $ bordercolor;
  text-align: center;
  color: $ pagetitlecolor;
}

In this code you the right to change or disable the margin, border discretion when using the logo or search box. More important to calculate how ingenious horizontal size (width) of the header-wrapper level by the total size of the header, and the margin of our box.