Showing posts with label header right. Show all posts
Showing posts with label header right. Show all posts

Thursday, April 22, 2010

How to Add a Widget Beside Blogger Header?

I am using a three column template and I want or Page Element just beside my Blogger's header / title, so I can easily , texts, links or other things.

So, here is the . This will also work for two columns template.

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 , width: 400px;

#header {
margin: 25px 80px 0;
width: 400px;
text-align: left;
color:$pagetitlecolor;
}

4. Copy the code below and 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. 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 .

You can always the width to perfectly fit your title/.

Enjoy!