Posts
|
|
To make a new sidebar isn’t difficult, you only need to place the float code in the left and add the padding-right isn’t so that the left column and the main column don’t touch each others. You are confused, aren’t you? Well, I make you confused clip_image001..Just kidding again?
For you who want to place the sidebar column in the left, please read this article first because the present article is the continuation of that article. I am afraid that if you directly read this article, you will get more confused.
Before I continue to tell you about this topic, I suggest you not to use your main blog to do this tutorial but the use the other or trial blog. Why?In order to anticipate the unexpected result. If this experiment doesn’t work well, it will not damage your main blog…right? But only damaging your trial blog.
Ok, my friends..let’s start. I assume that you have made or created a new column. First, never give a check for Expand widget Template box. If you do it, it will give you a very complicated and confusing widget code.
In my previous posting, I wrote this code;
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */
#newsidebar-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
I order to make different result with the previous posting. I mean that the column isn’t in the right but in the left, you should only change the code a little. Please, look at the red code below and change them into:
#newsidebar-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
If you see the blue codes, you only need to change the two line code and don’t change the others code. After changing it, don’t forget to save the template.
Next, go to the bottom of your template and find the <body> tag. In the previous posting, I suggested you to put the code like this ;
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
<b:widget id="Profile1" locked="false" title="About Me" type="Profile">
<b:widget id="BlogArchive1" locked="false" title="Arsip Blog" type="BlogArchive">
</b:widget>
</b:widget></b:section></div>
<div id="newsidebar-wrapper">
<b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section></div>
Now, if you want to place the new sidebar in the left side, then you have to move that sidebar code above the main code (posting). The whole codes will look like the following:
*
<div id="newsidebar-wrapper">
<b>:section class='sidebar' id='newsidebar' preferred='ye'/'></b>
</div>
*
<div id="main-wrapper">
<b:section class="main" id="main" showaddelement="no">
<b:widget id="Blog1" locked="true" title="Posting Blog" type="Blog">
</b:widget> </b:section></div>
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes"><b:widget id="Profile1" locked="false" title="About Me" type="Profile"> <b:widget id="BlogArchive1" locked="false" title="Arsip Blog" type="BlogArchive"></b:widget></b:widget></b:section></div>
Remember to click save template after finishing it.
No comments:
Post a Comment