How To Divide Your Blogger Header Into Two Sections

This Post will show you how to divide the header of your Blogger blog into two parts, so you can add two gadgets or widgets to both areas and maximize precious header space by adding more functions to your site. It is very simple to divide a header part but you never try that. I find that code accidently, when I make some editing in my template.

Let’s have a look at how to divide header part into two. Follow the tutorial to divide your blogger header.

Divide Your Blogger Header Into Two Sections

1-Go to your Blogger dashboard.

2-Go to Template

3-Click on Edit HTML, then click on Proceed.

4-Using Ctrl+F, locate the bellow code…

5-Now that we’ve confirmed the header’s size, set the width of the main header section to 300px in the following code below:

Notice that we indicated float:left; above the new width. This will relocate one half of the header to the left.

6-Let’s create the section for the right half, also at 300px width:

7-Then place it under the #header class as such:

8- locate the
tag and paste the following code below it. It should look like this:

9-Save the template.

10-Go to Layout.

The new section on the right side of your header should be visible now.
You can try experimenting with different header widths to see what sizes suit your design and widget preferences best.

That’s all ….Don’t forget to use the comment box for your thoughts…

At last Have a nice day…
The following two tabs change content below.
I am Akhil abraham Computer Science Engineering graduate From India . I complete my BE from Anna university. Now I am working as a blogger , freelancer and web developer.I started this blog for sharing the information that i learn in my way of blogging.

Latest posts by Akhil Abraham (see all)


If you did like to stay updated with all our latest Blogging Tips. please enter your e-mail address here


  1. You offer some great blogging tools Akhil! Great work!

  2. Thank you for writing this up, it’s just what I needed. I want to add an image to my header without deleting the HTML name for SEO.

    Much appreciated.

  3. randy says:

    thanks for this post.. Now I can add gadget on my header

Speak Your Mind