Add a Widget Beside Your Header

Hey Annie!

Thanks for the tutorials on this blog. They're a big help.

I would like to know, is there a way to add content to the right of my header? Sort of like another sidebar? My blog is HERE. Please take the time to visit. It's still under construction though.

Thank you and more power.



There is a way, and it can be done with creating a widget. First you will make a couple of changes to your CSS style sheet. You will want to find the Header section. Look for something like this:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Basically what we are doing is dividing the header up. I'm going to make each side equal, but you can use any proportion you want allowing for the margins. So, replace that code with this:

#header {
width: 300px;
float: left;
margin: 5px;
text-align: center;
color:$pagetitlecolor;
}
#header-right {
width: 300px;
float: right;
color: $pagetitlecolor;
margin: 5px;
padding: 5px;
}

You can adjust these values to fit your template. (It should not equal more than your outer-wrapper.) Almost done! Find this code in your template:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
</div>

And replace it with this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>

Take a look at your page element page and you will see your new widget.

Click for larger image

You can now add content to that widget. For my example, I added my profile. Here is a screen shot before:

Click for larger image

and here is after:

Click for larger image

You don't have to do anything where it says YOUR BLOG TITLE. Your title will automatically fill in. Now you can add whatever you like in that widget, from your profile to a picture!