How to Split or Divide Header In Three Colums in Blogger (Blogspot) Templates
|
|
How to Split or Divide Header In Three Colums in Blogger (Blogspot) Templates? Many blogger wants to divide their blogger header into three section for adding adsense ads or buysellads so after applying this trick in your blog you can add ads and other social network widget in your blogger header.
* First go your blogger dashboard.
* Now click in design tab and edit HTML .
* Expand your blogger template.
* Find out the below code
#header {
margin: 5px;
border: 1px solid $bordercolor;
* Now replace above code with below codemargin: 5px;
border: 1px solid $bordercolor;
#header {
float:left;
width:30%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{float:left; width:30%; height:200px}
#header3{float:left; width:39%; height:200px}
Note- You can change #header2 and #header3 height and you can change width if you want.float:left;
width:30%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{float:left; width:30%; height:200px}
#header3{float:left; width:39%; height:200px}
* Now again scroll down to where you see like this code:
<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>
Note- Remember that YOUR-BLOG-TITLE is your real blog title.<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 above code with below code
<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'/>
<b:section class='header' id='header3' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div>
* Change your blog title with your own.<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'/>
<b:section class='header' id='header3' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div>
* Now save your blogger template now you are done.
You can see the post How To Show or Display Only Post Titles on Homepage in Blogger Blog If you need.
|
Subscribe to Get Newest Articles By Email! |
Follow us! 
|
Categories:
Blogspot
0 comments:
Post a Comment