Emoticons wallpapers >> Blogger Designs Tips >> Header divided into two parts

Header divided into two parts

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.

Poster : Netvn
Viewed : 7805

tag emoticons wallpapers
Cool pictures - Nice pictures - Cool themes - Free iCartes - Smileys gratuits - Fond d'ecran - Gifs free - Ipad wallpapers - Nice pictures - Text generators - Glitter graphics - Emoticones - Page backgrounds - Free profile layouts
tag emoticons wallpapers
Avatars: 22928, Backgrounds: 3649
Wallpapers: 4780
Glitter Graphics : 7899
Smiley face: 2433
Share |
Online: beautiful photos