The Bloggerheader is Consist of every single section that you see at the top of every blog. Where you can add your blog logo or you can add your blog title and description So many peoples are don’t like these type of header and want to Changeit in tow parts.
Today I am completely tell you how you can change your header in two parts. you only need to editing in you template and you don this in few minutes. When you don this then your template look two parts where you can add one little logo and one 468 by 60 banner to right side. When you don this then you go to your Layout and add your banner widget.
Split Your Blogger Header in Two Parts:
This is very simple and easy but need one thing that is your attention. You need to read all steps very deeply and then apply on your blog.
1. Log-in to your Blogger account and Click on Template>>Edit HTML.
2. Back up your Template.
3. Search the following Code.
#header-wrapper {
width:960px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}#header a {
color:$pagetitlecolor;
text-decoration:none;
}#header a:hover {
color:$pagetitlecolor;
}#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Remember your Code is not exact but similar to above code. You select above code contain the words "#header" ".header" at start.
4.When you find it then Replace it with below Code.
/*------Header-----*/
#header-wrapper{
width: 960px;
color: #000;
margin: 30px auto 0;
padding: 0px;
overflow: hidden;
}
#header-inner {
background-position: left;
background-repeat: no;
}
.headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited {
color: #0000FF;
font-size: 36px;
font-family: 'Ultra', serif, Arial;
font-weight: bold;
margin: 0;
padding: 0px 0 5px 0;
text-decoration: none;
text-shadow: 6px 6px 4px #ccc;
line-height:1.2em;
}.headerleft h3 {
font-family: arial, tahoma, Sans-Serif;
font-weight: normal;
margin: 0;
padding: 0;
}.headerleft .description {
color: #FFFF00;
font:bold 12px Helvetica, arial, sans-serif;
margin: 0px;
padding: 0 0 20px 0;
text-shadow: 4px 4px 6px #ccc;
}
.headerleft {
width: 450px;
float: left;
margin: 0;
padding: 0;
height:80px;
}
.headerright {
width: 468px;
height:80px;
float: right;
margin: 0px;
padding:1px 0 0 0;
}
4.Now again Search Below Code. Its also not exact but similar. You find this Code Contain the <b:section and </b:section>tags.
<div id='header-wrapper'>
<b:sectionclass='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='The MBT Lab (Header)' type='Header'/> </b:section>
5.Now Replace the above It with Below Code.
<div id='header-wrapper'>
<div class='headerleft'>
<b:sectionclass='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='The MBT Lab (Header)' type='Header'/></b:section>
</div><div class='headerright'>
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
6.Click on Save Template and View a new Look of your Template.
Customization:
- If you want to Adjust header width the Edit: 960px
- If you want to Change header title Color then Chang e: #0000FF
- If you want to Change Header description colour then change: #FFFF00
Need Help?
I hope you Don all things Successfully if you got any problem then feel free to ask by doing a comment below and also Subscribe E-mail updates and keep visiting this site for learn more about blogging and other things.
