Saturday 29 December 2012

How To Add Two Sidebar Above/Below To Any Default Sidebar

How to Divide Blog template's Sidebar Into two Parts?


How To Add Two Sidebar Above/Below Any Default Sidebar-iGAWAR


Want to Add two sidebar Just below And above any default sidebar??
Want to Divide A single sidebar into two of any width??
iGAWAR Presents How To Add Two Sidebar Above/Below Any Default Sidebar , A tutorial that will Help You to Customize Your Blog template's Sidebar.Thanks to simplebloggertutorials for Creating this trick..I just Customized it further And explained it in simple ways..!!


So lets Start Customizing Your Sidebar:

The main Sidebar Is assigned As #sidebar-wrapper  in most of the templates.
If you have 3 Column templates then the the Other sidebar will be named as  #sidebar-wrapper1 and  #sidebar-wrapper2.



To Add two Sidebar In Main Sidebar , Follow Below Steps:
  • Go to Blogger Dashboard --> Template --> Edit HTML
  • Backup your Template before making any changes to your blog..Click here to know how to backup blog.
  • Press Ctrl + F and search the code shown below.
#sidebar-wrapper {
width:220px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

Add the Following Code Just Behind The Above Code Code:

#right-col {
width:48%;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#left-col {
width:48%;
float:left;
word-wrap:break-word;
overflow:hidden;
}

Now Find

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

Replace this Entire Code  By Below Code:

To Add Two sidebar below main widget use this code:



<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>

To Add Two sidebar Above main widget use this code:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

To change the Width of new left/right Side bar
Change
width:48%;
you can change 48% to any number.
just make sure that the sum of both the width is less that 98%.

                                                       

Preview the template and save it..!
Check layout section to observe the Change..!!

                                                       igawar customizing sidebar into two parts


If you facing any problem with this Trick then feel free to ask in comment box below..!!
Happy Blogging..!!
Keep visiting @iGAWAR

No comments:

Post a Comment