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…
You offer some great blogging tools Akhil! Great work!
Hi Phil..
Thanks for your comments..keep updating with us..
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.