Add Widgets Beside Blogger Header

I'm actually using a three column templates but still, I want to add a Widget or Page Element just beside my Blogger's header/title, so I can easily apply images, texts, links or other things.

So, here are the techniques that will work for both two-column and three-column templates.

1. Log-in to your Blogger Account and click Dashboard.

2. Go to Layout, then go to Edit HTML.

3. Look for the code below and add this code, width: 400px;
#header {
margin: 25px 80px 0;
width: 400px;
text-align: left;
color:$pagetitlecolor;
}

4. Copy the code below and paste it just after the code above.
#header-right {
margin: 5px;
width: 250px;
float: right;
color:$pagetitlecolor;
}

5. The code should look like this.
#header {
margin: 25px 80px 0;
width: 400px;
text-align: left;
color:$pagetitlecolor;
}
#header-right {
margin: 5px;
width: 250px;
float: right;
color:$pagetitlecolor;
}

6. Now, look for another 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>

7. Change the code with the code below.
<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>

8. Now, you have divided the header's section. Go to your Page Elements' area and you add a new widget beside your header.


You can always adjust the width of the widgets to perfectly fit your title/header.

Enjoy!