Most of the newbie blogger are facing the problem to split the header widget in two parts one for blog title and another one for search engine.In this article i am going to explain you step by step so you can achieve it easily.
Note:This article example is achieved successfully on my blog but i suggest you to take a back up copy of your Template and test it.
Steps
1.Go to Blogger.com and login with your account
2.After successful login it will take you to your blogger dashboard
3.Now click on layout and the click the subcategory Edit HTML
4.Search for this below content in your blog HTML Editor
/* Header
------------------------------------
*/
#header {
width:960px;
margin: 0px;
text-align: left;
color:#ffcc66;
}
Now replace this above code with this
#header {
margin: 0px;
width:500px;/*width size for title widget*/
text-align:left;
float:left;
color:#ffcc66;
}
#r_head{
width:500px;/*width size for search widget*/
float:left;
}
One more main steps to do that
Now locate this below code in the same HTML Editor
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog' type='Header'/>
</b:section>
</div>
Now replace this above code with this
<div id='header-wrapper'>/*Header calling function*/
<div id='head-inner'>/*Title Header*/
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>/*Search Header*/
</div>
</div>
Thats it .Almost you done.Go to layout page element and select the search widget by clicking the add widget..
Note:This article example is achieved successfully on my blog but i suggest you to take a back up copy of your Template and test it.
Steps
1.Go to Blogger.com and login with your account
2.After successful login it will take you to your blogger dashboard
3.Now click on layout and the click the subcategory Edit HTML
4.Search for this below content in your blog HTML Editor
/* Header
------------------------------------
*/
#header {
width:960px;
margin: 0px;
text-align: left;
color:#ffcc66;
}
Now replace this above code with this
#header {
margin: 0px;
width:500px;/*width size for title widget*/
text-align:left;
float:left;
color:#ffcc66;
}
#r_head{
width:500px;/*width size for search widget*/
float:left;
}
One more main steps to do that
Now locate this below code in the same HTML Editor
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog' type='Header'/>
</b:section>
</div>
Now replace this above code with this
<div id='header-wrapper'>/*Header calling function*/
<div id='head-inner'>/*Title Header*/
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>/*Search Header*/
</div>
</div>
Thats it .Almost you done.Go to layout page element and select the search widget by clicking the add widget..
No comments:
Post a Comment