How to Add Page Element beside the blog header

There is a way, and it can be done with creating a widget. First you will make a couple of changes to your HTML . 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>