HOW TO SPLIT YOUR BLOG HEADER ONE WIDGET TO TWO TWO WIDGET


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..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s