Creating Header Being a two-part

 Tips this time that I Make Being a Two Part Header, Header blog is very important so it looks nice blog header was necessary, if the blog without a header like a headless man. he he ..






In addition to beautify your blog, the header typically contains the blog title and blog description, and even the header can also serve to place ads.

just go ahead, follow the steps below :

1.      As always in a state account to log in on my friend
2.      Click on the design
3.      Click on Edit HTML
4.      Could Download Full Template if afraid to fail
5.      Now locate the CSS code as it is similar beikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
} 

       6.        Replace the above code with the code below:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}

Consider the code in red at the beginning, adjust the width or number width with the width of your template header.
             
            7.    Now,Now, find the code like the following :

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

            8.     After finding the above code, paste the following code to the placement of a red color that resembles the example below:

<div id='header-wrapper'>
<div id='header-one'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

              9.    Click Save Template
             10.   Completed

To view the results, click on page elements, if your header look like the screenshot above all, it means you are succeed. Please fill out a new column with a range of widgets or ads.

Similarly, a few tips on how to make the header into two bagian.semoga useful.

Posted in: blog tutorials