Jun 1, 2012

How to split header in two columns in blogger

1. Just login to your blogger account.

2. Go to Template >Edit HTML >Proceed
(for old interface Go to Design >Edit HTML)

3. Back up Your Template.

4. Search for following lines in Your HTML Code.


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='BestThings4u (Header)' type='Header'/> </b:section>


5. To add a section, insert the following code just below the above code.


<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
 
6. Now the final code should look like this.


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bestthings4u (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
 
7. Now Search for the code.


]]></b:skin>
 
8. Now just place the given code above to Searched code.

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
 

9. Now save the Template.

10. then Go to Layout.
(for old interface Go to Design > Page Elements)

11. Click to add a gadget in header and add whatever You want.

12. Save and View Your Blog.



No comments:

Post a Comment

I always want a feedback related with this blog. If you encounter any problem. Kindly mail via Contact Us form. If this post helped you then share this page to your friends. Thanks for Visiting !

Related Posts Plugin for WordPress, Blogger...