It's simply easy to make, all what you have to do is just adding a short css code and a short script code into your template. Some what, you can get the codes only by copying the existing code for your blog header inside your template. Just, i think "maybe you still need to read the following lesson to make it, don't you?
1. Login to your blogger.
2. Go to design.
3. Edit html.
4. Tick on the Expand Widget Template to load the whole codes in your template.
5. Now download or copy the entire html code in your template so if you make any unexpected things when modifying your template you could still set it back to the previous arrangement
6. Find the below code in your template:
#header {
background: ...;
width: ...px;
height: ...px;
color: ...;
font-size: ...px;
margin: ...px;
padding: ...px;
overflow: hidden;
}
It could even be #header-wrapper or there abouts..
7. Now copy and put the below code right beneath the above code:
The above code should look like the below:
#header {
background: #333;
width: 1050px;
height: 100px;
color: #000;
font-size: 11px;
margin: 0;
padding: 0;
overflow: hidden;
}
#lheader {
background: #333;
width: 515px;
height: 100px;
float: left;
color: #000;
font-size: 11px;
margin: 0;
padding: 0;
}
#rheader {
background: #0000ff;
width: 500px;
height: 100px;
float: right;
color: #000;
font-size: 11px;
margin: 0;
padding: 0;
}
8. Got done? Find a code similar to the below:
< d i v id = 'header' >
< b : section class='header' id='header'
maxwidgets='1'
showaddelement='no'>
and "maybe" bla, bla, bla.. Till end on < / b :section>
< / d i v >
9. Replace the above with the below code:
Your code should look like the below:
< div id='header' >
< div id='lheader' >
< b:section class='header'
id='lheader'
maxwidgets='2'
showaddelement='yes' >
< /b:section >
< /div >
< div id='rheader' >
< b:section class='header'
id='rheader'
maxwidgets='2'
showaddelement='yes' >
< / b:section >
< /div >
< /div >
10. Now save your change and you are done.
Just check if your blog now has already had two headers on top. Just note this: your new header is now having nothing. Not even a "Header element" / gadget. You can simply add it or even any gadget into it by clicking the "Add Gadget" button in your page design and then choose a new alement to add to it.
Annotation:
1. Value for the "Width" included in the "#header" element is a value to set the width of your header by general / the whole width.
2. Value for the "Width" included in the "#lheader" element is a value to set the width of your left header.
3. Value for the "Width" included in the "#rheader" element is a value to set the width of your right header.
4. Value for the backgrounds are to set the backgrounds color.
5. Value for the heights are to set the high.
6. Value for the heights are to set the high.
7. Value for the colors are to set the text colors.
8. Value for the font-size's are to set the text fonts.
9. Value for the margins are to set the spaces.
10. Value for the paddings are to set the spaces.
11. Change the value for width according to your new header width included in the below elements:
*# outer-wrapper
*# main-wrapper which it is the width for your blog posts column.
*# sidebar-wrapper + left and right sidebar (in my template they are # lsidebar and # rsidebar)
*and the last is # footer-wrapper
0 comments:
Post a Comment