Blogspot page element originally is made with one standard navbar, one header lay out, one sidebar lay out, one space for posting and one lay out for footer.
I think, it would be nice if we have two sidebars in our blog. One for left sidebar and the other is for right sidebar and our post there betwent that two sidebars. Can we arrange that?
How if we have an editable navbar right on top of our post? Can we make it?
This is below table pic explain what we are talking about.
Navbar |
|---|
Header |
add gadget |
add gadget | post | add gadget this is your right editable sidebar |
Well. We can make it eazily. All we have to do is to put some codes line on css set of our blogger.
Lets sign in into the blogger, and choose which post to edited. Then go to lay out and click edit html.
Now, lets find this codes:
<div id=´croscol-wrapper´ style=´text-align:center´>
<b:section class=´croscol´ id=´crosscol´ showaddelement=´no´/>
Okay, now put the codes below right after that.
First. This is the codes for navbar widget.
<div id=´navbar1-wrapper´>
<section class=´navbar1´ id=´navbar1´ preferred=´yes´>
</div>
And then this below is the codes to make second sidebar. Lets put right after top navbar codes.
<div id=´left-sidebar´>
<b:section class=´left-sidebar´ id=´left-sidebar´ preferred=´yes´/>
</div>
Now please save your html, and find out what result. The boxes for add gadged was allready appear. Perhaps slipt one each other, but dont mind, it just need to fixed of the width. We must go to edit html and fix that measure of width. Easy to fix it. Lets say, outer wrapper:950px, sidebar:220px, mainpost:420px, and footer:950px. Thats it. One again save your html codes
Now try your lay out. Click lay out box and try to add gadget with your new left sidebar or navbar1.
Ofcourse, it does not work yet. We must fill the value of navbar1 and left-sidebar it self. Try to figure it out what and where to put.
You are right, we must type some codes like this:
#left-sidebar {
width:__
border:__
Lets put to your html code between <body> and </body> Then it would be working.
Okay, try this below codes:
#left-sidebar {
width: 210px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}
This below codes are for navbar:
#navbar1-wrapper {
width: 930px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}
Thats it. Save your html and see what wonderfull blog are you now.