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!

How To Remove Header Borders in Blogger?

How To Remove Header Borders in Blogger

Do you want of your / title in your Blogger blogsite? If yes, just follow the simple steps below.

1. Log-in to your Blogger Account.

2. Dashboard and click Layout, then Edit HTML.

3. Look for the codes below.

#header-wrapper {
width: 80%;
margin:0 auto 25px;
border:1px solid $bordercolor;
}

and

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

4. Remove or delete the code

border: 1px solid $bordercolor;

5. Click Preview to see the results and when you are done.

You have successfully !

Just incase you change your mind and you want the again in your Blogsite's / header, follow the same step above and add this code (border: 1px solid $bordercolor;) again.

Sunday, April 18, 2010

How To Add Widget Below Blogger Header?

 above or below the title / header of my is not as complicated as I thought. You just need to follow the instructions in order to create a new widget or element like the sample image below.

-----------------------------------------------------------------------------

-----------------------------------------------------------------------------

Once there is an element, you can also apply and save other applications like Adsense.  above.


And here is the technique:

1. your Blogger Account.

2. Go to Layout and to Edit HTML.

3. Click Download Full Template and save it. It is important to have a of your template, in case something goes wrong.

4. Find the code below. One way to easily locate the code is to click CTRL+F, then type section class and click Enter.

<section class="header" id="header" maxwidgets="1" showaddelement="no">

5. Change the code with the one below.

<section class='header' id='header' preferred='yes'>

6. Save the template.

7. Go to back to Layout then .

8. You can see that a new element has been added just . Now, click Add a Page Element.

9. You can choose and add a widget that you want, for example .

10. If you want the widget (ex. Adsense) to be placed exactly below the header, go back to Page Element section and simply drag the widget.

11. Click Save at the top of the page when you are done.

If you want the Adsense to appear as (the same as what I did with the image above), look for Adsense in Page Element area and click Edit. Change the format to 728x15 horizontal row.

That's all.