12 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
If you Really Liked This Post On Blog Just Honour us By Registering your email and Allowing us to Send Recent Widgets, Hacks And Templates To your Inbox.
Share/Bookmark

12

jinni said...

you have sum skills buddy..

May 1, 2009 6:54 PM
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

May 26, 2009 6:50 PM
Anshul said...

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

May 26, 2009 10:37 PM
Sudeep said...

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

sudeep611@gmail.com

June 18, 2009 10:41 PM
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'/>

June 18, 2009 11:57 PM
Senthil said...

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

Senthil

June 22, 2009 3:21 AM
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

August 8, 2009 10:23 PM
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.

August 8, 2009 11:31 PM
sruthi said...

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

October 29, 2009 12:28 PM
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

October 29, 2009 1:49 PM
chinna said...

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

November 1, 2009 6:28 PM
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.

November 8, 2009 2:40 PM

I Will Not Be Able To Give You Comments Support For Some Days,So Sorry For Inconvenience.Will Be Back Soon.Wait For this message to disappear to get your answers for comments.

 
Web Design Top Blogs Technology Blogs - Blog Rankings Blogging Tips Blogs - Blog Catalog Blog Directory blogarama - the blog directory Blog Directory & Search engine Display Pagerank
eXTReMe Tracker