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:
you have sum skills buddy..
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
@ sanjay can u explain me clearly as i am not able to get you clearly...
Hi ansul i am not able to click on add a gadget pls help me
sudeep611@gmail.com
@ 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'/>
Thanks Anshul, I have implemented in my blog http://indiapatents.blogspot.com
Senthil
i can't understand where to post the last code because of the bad picture quality .
plz tell me where to paste last code
@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.
i tried this but i didn't succeeded.please help me to change my header split into two.
@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
i cant use it in the template created by mybloggertricks.com MBT church theme
please help me anshul
@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.
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!
@unity i would have done it for sure but these days me too not getting time for update my blog.
i am interest with this trick....clever and creative
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/
i tried it and it work, Thank you.
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
cant say unless i see your blog and check codes.
Here's my blog http://skincare-4all.blogspot.com/
How can I let you see my template?
@norel seems difficult to say unless i see codes personally.Mail me to anshulaffprg[at]gmail.com
Very nice and simple. Thank you for sharing this!
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,
@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.
Thank you very much, this info was really useful for me and my blog =)
i didnt try this coz i knew there will be problem may i encountered.. check my screenshot http://i35.tinypic.com/20r0hhf.jpg
@rhaye ya tutorial fordefault template to do in every template you need to know other codes also, not easy for begginer.
maybe i shouldn't test this to keep away from regrets hahaha thx anshul :D
Very very helpful, I will try it on Blog
http://liveingreenworld.blogspot.com/
Thank you.
Where is the closed tag for ?
Uhm...Need the True code ...
Post a Comment