To split blog header in new blogger template it is required to edit few HTML code in blog. To split blog header in new blogger template follow the instructions.
Important Note: If the added widget shows up under the blog title instead of on the same level, on it’s right, go back to the CSS code in step 8. Change header width from line 1 and header-right width from line 2 i.e.
- Login to your Blogger account.
- Go to Dashboard > Design > Edit HTML.
- Back up your template.
- Make sure the Expand Widget Templates checkbox is TICKED.
- Look for the following lines in your HTML code:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ABRAR KNIT (Header)' type='Header'/>
</b:section>
- Insert the following code right under the above code:
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
- Once again look for the following lines in your HTML code:
]]></b:skin>
- Insert the following CSS right before the above line:
#header, body#layout #header {width:60%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
 |
| Splited Blog Header in New Blogger Template |
- Save the Template.
- Now go to Design > Page Elements.
- Click the new 'Add a Gadget' link from right of the blog header and add your widget.
- Save and view your blog.
#header, body#layout #header {width:60% & #header-right, body#layout #header-right {width:35%Test the green marked width with different values until you get optimal split result in blog header.
10 comments:
It didnt work for me. The header is still occupying the complete area and the new gadget is created below it. Please help me with this.
Thanks
Hi Mohit,
Please read & follow the important note section with care. I hope it would resolve your problem.
I have seen your two blogs which are http://jusmuzik.blogspot.com/ & http://forex-crunch.blogspot.com/. And the templates are respectively Awesome Inc. & Simple. Please be confident that it works for these templates. Thanks for your try.
it dint wrk 4 me., using ethernal template.
Thank you, thank you, thank you! I've been attempting to split my blogger header for over a week now and your instructions were the first ones that worked. You've made my day. :)
g8 job.! physicsenotes.blogspot.com
tnx!
This is what i have found: /* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
i found my blog header float far to left side..what im gonna do with it
See the "Important Note" section below to the post. ..
Hope this will resolve your problem.
This is a very helpful tip for blogger. Thanks for sharing How To Divide Blogger Header In Two Parts
Post a Comment