Unique tips of blogging

How To Split Sidebar Into Two Sidebars In Blogger

The editions, alignments, designs and customizations that can be performed on blogger templates is up-to infinity.

Editing the blogger template code is very easy with help of the template editor and the direct html editor tools of Blogger, where as wordpress doesn't provide a way to edit template code directly.
This is one of the main reason why i like Blogger platform a lot n lot.
When we start thinking about performing various designs on a blogger template, i have given plenty of  tutorials on widgets, add-ons, customizations and so on.

Today i am going to give a tutorial related to customization on blogger template i.e on How To Split Sidebar Into Two Sidebars In Blogger which is a very necessary tutorial for bulk of blogger users. So what are you waiting for, Lets move on.

 

Tutorial On How To Split Sidebar Into Two Sidebars In Blogger::

 
1. Go to Blogger dashboard --> Template --> Edit Html (Tick the Expand widget template option).
Note::
Download your template before doing any customizations.
 
2. Find for the code like this.
 #sidebar-wrapper{
float:right;
width:320pxdisplay: inline;
overflow:hidden;}
 
3. Replace the above code with the code given below.
 #sidebar-wrapper{
float:right;
width:150px;
display: inline;
overflow:hidden;}
#rsidebar {
float:right;
width:150px;
padding-left:10px;
display: inline;
overflow:hidden;
}
Note::
  • You should split your sidebar width into two equal or variable widths as you wish.
  • Adjust the padding and margins to fit well for your template.
 
4. Now find for the below code.
<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
 
5. This code will be in below format.
<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
BULK OF WIDGET CODES</b:widget>
</b:section> </div>
 
6. Add the following code right after the closing div tag like this.
<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
BULK OF WIDGET CODES
</b:widget>
</b:section> </div>
<div id='rsidebar-wrapper'>
<b:section class='rsidebar' id='rsidebar' preferred='yes'>
</b:section>
</div>
 
7. Now Save your Template.
8. Now Go to your Layout section and you can notice two sidebar sections in your template.
0 Komentar untuk "How To Split Sidebar Into Two Sidebars In Blogger"


Back To Top