How to divide your sidebar to two columns
1. Log in to your blogger account and Go to Design >> Edit HTML
2. First of all download your full template.because if you make some wrong
you can recover it.
3. Put checked marked in Expand Widget Templates
4. Find this code (similar to this code)
*Each template has a composition different code. So you need to consider is the value of
its width.This above codes width is 254px,so you have to divide it. (117px and 117px)
and change second column margin.
5. Replace Above code with this below code.
6. After find like this code.
7. Paste below code after there </div> tag
8. Now you are done.Click preview and save the template and Go to page element and see the result.
1. Log in to your blogger account and Go to Design >> Edit HTML
2. First of all download your full template.because if you make some wrong
you can recover it.
3. Put checked marked in Expand Widget Templates
4. Find this code (similar to this code)
*Each template has a composition different code. So you need to consider is the value of
its width.This above codes width is 254px,so you have to divide it. (117px and 117px)
and change second column margin.
#sidebar-wrapper { background-color: #f6f6f6; width:254px; float:$endSide; padding:0; color: $sidebarTextColor; font-size: 83%; word-wrap: break-word; overflow: hidden; }
5. Replace Above code with this below code.
#sidebar-wrapper { background-color: #f6f6f6; width:117px; float:$endSide; padding:0; color: $sidebarTextColor; font-size: 83%; word-wrap: break-word; overflow: hidden; } #sidebar-wrapper2 { background-color: #f6f6f6; width:117px; float:$endSide; padding:0; margin:0px 20px 0px 0px; color: $sidebarTextColor; font-size: 83%; word-wrap: break-word; overflow: hidden; }
6. After find like this code.
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Label1' locked='false' title='kategori' type='Label'/> <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/> <b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/> </b:section> </div>* Important is find about code, what i mention in red color.
7. Paste below code after there </div> tag
<div id='sidebar-wrapper2'> <b:section class='sidebar' id='sidebar2' preferred='yes'> </b:section> </div>
8. Now you are done.Click preview and save the template and Go to page element and see the result.
Great! thanks it's help
ReplyDeleteI am unable find this code in my blog
ReplyDeletewww.vmwarearena.com
#sidebar-wrapper
Please help