Hi bloggy readers,
After i made description of header and footer in my previous post, it's time for me to proceed to the next element, and that would be a sidebar element. Sidebar is the best place where we can put our gadget because of its nearest position with other element, so it gives us an advantage to explore the blog easier and faster. Do you know where is the position of the Sidebar element? The position of sidebar can be divided in 2 position, on the left and right side, depends on the owner of the blog decision. But in the default template provided by blogger, the position is usually on the right side. See the picture below!
Sidebar position in the HTML template code
And next we want to know about where is sidebar position in HTML code on blogger template. Actually, the position of the sidebar code is after the post element code or main wrapper in HTML terms. The sidebar code or sidebar wrapper in HTML terms. Now look at the code below!
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
And the code to display the sidebar can be found at bottom of the HTML code:
<div id='sidebar-wrapper'>
Ok, that's it guys. Hope this tutorial can help you to understand about the sidebar element. Good luck bloggy!
...
...
...
</div>...
...
Ok, that's it guys. Hope this tutorial can help you to understand about the sidebar element. Good luck bloggy!
