Splitting main sidebar in two column it’s very easy just follow below steps for add two columns sidebar.
Note – before change in HTML you should Backup your Template In case you make any mistake you can restore your template.
How to Backup and Restore Blogger Template
Login to your blogger Account
Select your Blog.
Click Template (See below help Image)
After this Click to Edit HTML option. (See below help Image).
Now find below code by pressing Ctrl+F.
Note : some part of below code can be different,according to your template.but highlight code you can find easily middle code may different.
<div id='sidebar-wrapper'>
<b:section class='sidebar'
id='sidebar' preferred='yes'>
<b:widget id='Feed' locked='false' title='Recent Posts'
type='Feed'/>
<b:widget id='Label' locked='false' title='Labels'
type='Label'/>
</b:section>
</div>
|
Now add below code between </b:section> and </div>
<b:section class='sidebar' id='sidebar-left4' showaddelement='yes'>
<b:widget id='Text514' locked='false' title='Column 1' type='Text'/> </b:section> <b:section class='sidebar' id='sidebar-right4' showaddelement='yes'> <b:widget id='Text524' locked='false' title='Column 2' type='Text'/> </b:section> <div style="clear: both;"></div> |
See Blow Helping Demo Image where to add above code
Next Step Now Find below code
]]></b:skin>
Now add below code before ]]></b:skin> tag
#sidebar-left4 {
width: 46%; float: left; } #sidebar-right4 { width: 46%; float: right; } |
See Blow Helping Demo Image where to add above code
Note: You can change values of width, as your like.
Now save your template you have done it.
Thanks I hope you like this post
