splitting up the header in blogspot
Today seems to be shaping up as a Fırat Gunal day here on easy peasy. While he is busily developing his own site he has been fabulous about finding some really useful stuff which we can share here as well:
You may want to add a button or a search box onto the header of your website. In which case you need to split it. Here, as re-blogged from BloggerSentral, is how to do this:
Go to Dashboard > Design > Edit HTML. Make sure the Expand Widget Templates check box is un-checked. 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='My Test Blog (Header)' type='Header'/>
</b:section>
Insert the following code right under (after) it:
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
So the final code should look like this:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
You now have two sections in the header, the section with the existing blog title on top and the new section below it. You will now need to position the sections side by side, by floating the section containing the blog title to the left, and the new section to the right. To achieve that, locate this line of code:
]]></b:skin>Add the following CSS code right before (on top of) the line:
#header, body#layout #header {width:50%;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;}
Now it is time to add the banner, search box, or whatever it is that you want to add. Go to Design > Page Elements and click the Add A Gadget link to add your widget. 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, and change header and header-right widths and experiment with different values until you get it right. And you can see a screenshot of how this looks on Fırat's post.
(Extra little tip from Fırat: You can also do this by going to Design > Template Editor > Advanced > Add CSS where you will see the newly added code and also how the header looks on the page. Much easier to tweak values when you actually see what you are doing at the same time! ;-)
