How Split Blogger Header Into Two Sections



How Split Blogger header Into Two different Sections,ya as you have seen header section on left side in blogger layout and and one section in right side where you can add your add banners.Now i will show you how you can split your blogs header into two widgets like the following screenshot.





First i recommend you backup your template or use a test blog for this example I'm going to use the Minima Template so if you are using a different template the code would be different. The default width of the template header-wrapper code is 660px
(if you don't know what I'm talking about see screenshot below)





So I'm going to set the width of the main header section to 350px and float it to the left see screenshot




Now that's done we can create the second section for the right widget so copy the following code


#header2 {
float:right;
width:250px;
}


And paste it some where in between the opening and closing skin tags like done below




Now copy the following code for the new section


<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>


And paste it like in below image,You can Click the below image to see the codes large and clear if not properly visible.



Now save it and go to the page element tab you should have a new section on the right side of the header here's a screenshot of my result





Credits:-lawnydesigns

30 comments:

jinni said...

you have sum skills buddy..

sanjay is one of them which create world hell said...

hey anshul dudeja i am sanjay dudeja wana u r help bro i wana to know how i can make diffrent section in a blog like windows section and mobile section

Anshul said...

@ sanjay can u explain me clearly as i am not able to get you clearly...

Sudeep said...

Hi ansul i am not able to click on add a gadget pls help me

sudeep611@gmail.com

Anshul said...

@ sudeep its working fine checked installing codes once again if its not able to click add a gagget Then use this line

<b:section class='crosscol' id='header2' maxwidgets='1' showaddelement='yes'/>

Instead of below one in your codes it will work for sure.

<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>

Senthil said...

Thanks Anshul, I have implemented in my blog http://indiapatents.blogspot.com

Senthil

Nave said...

i can't understand where to post the last code because of the bad picture quality .

plz tell me where to paste last code

Anshul said...

@nave thanx for letting me know about it,i have made the image large and now you can just click it to have clear view of codes.

sruthi said...

i tried this but i didn't succeeded.please help me to change my header split into two.

Anshul said...

@sruthi your template design seems too old there might can problem in installing it.As i have seen you posting only videos.So i would like you too use this template by far the best video template for blogger released but work on only you tube videos- http://www.dantearaujo.net/2009/09/blogger-video-template.html

chinna said...

i cant use it in the template created by mybloggertricks.com MBT church theme
please help me anshul

Anshul said...

@chinna i just told about default google template as an demo.As in different template it can be different as all it depends upon desing.Any designer can do it very easily if he all aware of blogger codes.

Unity Bond said...

I wanna split my header into two. I've tried this hack many times but the width and the height doesn't align with my blog title.

If you're free, do you mind patch my template and split the header into two? I want to put ads banner just right next to my blog title (Unity Bond to be exact) but align with the search box below...get it? My e-mail is unitybond@gmail.com and I can send you the template. :)

Keep it up! your blog's nice!

Anshul said...

@unity i would have done it for sure but these days me too not getting time for update my blog.

BEBEN said...

i am interest with this trick....clever and creative

Norel Gad said...

Thank you for sharing. you are one smart blogger. Anyway how do I make the 2 headers stay close to one another without much gap in between.
Thank you/

Norel Gad said...

i tried it and it work, Thank you.

Norel Gad said...

I tried this trick on my other blog but it doenst work like my first blog. I know there is something wrong in my template but I dont know how to fix it, When i add all the code to my template the left sidebar was pull to the right, Please help me. Thank you

Anshul said...

cant say unless i see your blog and check codes.

Norel Gad said...

Here's my blog http://skincare-4all.blogspot.com/
How can I let you see my template?

Anshul said...

@norel seems difficult to say unless i see codes personally.Mail me to anshulaffprg[at]gmail.com

Vanessa D. Alexander said...

Very nice and simple. Thank you for sharing this!

D Class Blogger said...

Hi there,

I'm using blogger in draft, and I get a parsing error about the "div" tag when I try to save the template. Do you know if the codes are different for blogger in draft?

Sincerely,

Anshul said...

@dclass there is no difference of codes in draft.Just u would be adding codes at wrong place thats why showing that error.Just ad them carefuly.

Harry said...

Thank you very much, this info was really useful for me and my blog =)

Rhaye said...

i didnt try this coz i knew there will be problem may i encountered.. check my screenshot http://i35.tinypic.com/20r0hhf.jpg

Anshul said...

@rhaye ya tutorial fordefault template to do in every template you need to know other codes also, not easy for begginer.

Rhaye said...

maybe i shouldn't test this to keep away from regrets hahaha thx anshul :D

nizam khan said...

Very very helpful, I will try it on Blog

http://liveingreenworld.blogspot.com/

Thank you.

K3LVIN MITNICK said...

Where is the closed tag for ?
Uhm...Need the True code ...

Post a Comment