divides 2 column sidebar

confused also still love the title of this posting. But I'm sure you already know with the intention of posting title above. This post about tweaking your blog template brain. If the previous post I wrote about how to widen the blog page, so this time I will try to share about how to divide 2 column sidebar of your blog or add a column in the sidebar of the blog.


This way I have often applied in the default blog template Minima. But even so, still can be applied in other blog template because essentially the same. Before starting to discuss about how to divide 2 columns blog's sidebar, it's good if you widen the first column of your blog's sidebar. Because if a small sidebar of your blog, then reply in the 2 will be a small plus. Therefore, you first have to widen your blog's sidebar. For memperlebarnya way, you can read my post about how to widen the blog pages.

Well .. if if your blog's sidebar column width is sufficient, then it is time to divide the 2 column sidebar. Please refer to the steps - steps:

1. The process of editing css code
Once logged in blogger,go directly the edit menu html and do not have to love a check in the column expand widget templates . Next, locate the css code like this:

#sidebar-wrapper {

width: 190px;

float: $endSide;

word-wrap: break-word;

overflow: hidden;

}

does not necessarily identical, essentially looking for the css code to make the sidebar. If the code above that is  #sidebar-wrapper { Then see how much its width, if the code above its width is 190px.

Well .. the logic if you want to divide into 2, then the total width of the first sidebar should be divided by 2. For example .. in the code above its width 190px. So to share it live 190px: 2 so that the width of each - each sidebar column is 95px. It's true, but remember we have to give the distance between the sidebars to-1 with that of the 2nd so not attached. How do I ..?! before dividing 2, subtract the first line with the desired spacing. For example ... I would love away 20px, then the width of the sidebar-1 become 190px - 20px 170px and results. Well .. only then divided by 2, so that the width of each - each sidebar to be 85px.

Once we determine the width of each - each sidebar, then declare it in code css live. .... do I copy and paste the code into the sidebar of the first 2 and change its name to   #sidebar2-wrapper  For example .. for the code above into something like this:

#sidebar-wrapper { --> kode sidebar awal

width: 190px;

float: $endSide;

word-wrap: break-word;

overflow: hidden;

}

#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)

width: 190px;

float: $endSide;

word-wrap: break-word;

overflow: hidden;

}

Next, change the width of each - each sidebar as discussed earlier to be 75px. So the result to be like this:

#sidebar-wrapper { --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

The last step to the process of editing the css code that is adding the distance between these two sidebar columns. The trick, add the css code #sidebar2-wrapper  a command for declaring the distance,ie margin . So the result like this: 

#sidebar-wrapper { --> kode sidebar awal

width: 75px;

float: $endSide;

word-wrap: break-word;

overflow: hidden;

}

#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)

width: 75px;

float: $endSide;

word-wrap: break-word;

overflow: hidden;

margin-right: 20px;

}

2. Applications in html code
Well .. for editting the css code is complete. Then it's time to apply the css code in html code blog. .. do I find the html code like this and focus on the green pad text only. Due to the red of each template is different:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='BlogArchive2' locked='false' title='blog archive' type='BlogArchive'/>

<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>

</b:section>

</div>

If you've met, copy and paste the text in green below the html code. Then change its type id into sidebar2. So the result:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='BlogArchive2' locked='false' title='BlogArchive' type='BlogArchive'/>

<b:widget id='Profile2' locked='false' title='about me' type='Profile'/>

</b:section>

</div>

<div id='sidebar2-wrapper'>

<b:section class='sidebar' id='sidebar2' preferred='yes'>

</b:section>

</div>

Caution .. do not sampe wrong. When finished please click the first preview / preview. If the result is a new good save. But ... if there is an error or mistake, click edit clean / clear edit, then repeat steps from the beginning.