I am using a three column template and 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 is the technique. 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 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 to perfectly fit your title/header.
Enjoy!
Showing posts with label blogsite title. Show all posts
Showing posts with label blogsite title. Show all posts
Thursday, April 22, 2010
How To Remove Header Borders in Blogger?
Do you want to remove the borders of your header / title in your Blogger blogsite? If yes, just follow the simple steps below.
2. Go to 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 Save when you are done.
You have successfully deleted header borders in Blogger!
Just incase you change your mind and you want the border to show up again in your Blogsite's title / header, follow the same step above and add this code (border: 1px solid $bordercolor;) again.
Subscribe to:
Posts (Atom)