Search

Thursday 10 September 2015

What is the best trick to divide header in Two Parts?

What is the best trick to divide header in two parts. How to divide a blog header into two parts.

Are you getting bored to see long header of your blog?

Do you want some changes in your blog design?

If your answer is yes and you want to divide your blog header into two parts; you  are on the right track to do it.

But, you don't know how to do that.

Don't worry, if you are not a technical guy, I am here to teach you this trick in an easy to understand way.

Blogsopt blog template designer left the provision to modify your blog layout as per your requirements.

I am sharing with you, how you can split blog's header into two parts after following a tutorial written by CSSBasicTips a channel partner of BloggingFunda.

You can use this tutorial to divide the header of your blogger blog into two parts.
Dividing a blog header into two section is quite tricky. Make sure to take backup of your blog before modifying the XML code of your blog template.
Do you know that dividing your blog header into two sections can make your blog look more professional?

Making your logo to appear on the left side of your blog header, while you have some space to add any other gadget or advertisement banner to the right of the logo.

For dividing your blog header into two parts, we will make two types of changes in blog's template.
  1. Making Changes in XML Part of the template
  2. Making Changes in CSS Part of the Template
Here we go to change in the first part i.e. XML part of template.

10 Easy Steps to Divide blog header into two parts

Let's do it step by step after taking backup of your blog template.

STEP1 - Log in to your Blogger dashboard via www.blogger.com
STEP2 - Click on Template
STEP3 - Click Edit HTML tab (Back up your blog template)
STEP4 - DO NOT tick the "Expand Widget Templates" checkbox
STEP5 - Use CTRL+F to find the code below:

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

STEP6 - Copy and paste the below code, just under the above code

<b:section id='header-right' showaddelement='yes' />
<div style='clear:both;'/>

The FINAL code should look like:-

 <b:section class='header' id='header' maxwidgets='1'   
  showaddelement='no'>
 <b:widget id='Header1' locked='true' title='Blog 
  (Header)' type='Header'/>
 </b:section>
 <b:section id='header-right' showaddelement='yes' /> 
 <div style='clear:both;'/>

Now you have done the changes in the XML part and it is time to make changes in the CSS part of the template.

STEP7 - Use Ctrl+F to find ]]></b:skin>
STEP8 - Copy and paste the below code just above the ]]></b:skin> line


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

STEP9 - Save the Template.
STEP10 - View the Layout and it will show another Add Gadget on the right side of the header.

And you are done, now enjoy two parts of your blog header.

If you think, this post is written with an easy to understand format and every step is clear to you then you can share this post in your social circle.

So that every new blogger can take benefit from this post.

If you have any further query or you need any clarification feel free to give feedback along with your query. We will try to resolve it as soon as possible.

2 comments: