Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Divide Blogger Sidebar In Two Parts

Divide Blogger Sidebar In Two Parts

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

829 views

Sunil Bishnoi of TricksAndTeach came up with a tutorial that shows you a pretty clever way to give your blog a little bit more space, and it is achieved by splitting your site’s sidebar into two parts. By dividing the sidebar in two, you’ll be able to add a few more widgets, or perhaps insert additional icons to your social sharing and subscribe widget.

The steps involved are as follows:

  • On your Blogger dashboard, go to “Design”, and then “Template”.
  • Click on “Edit HTML”, “Proceed”, and check the “Expand Widget Templates” box.
  • Using “Ctrl+F”, search for the following lines of code.
#sidebar-wrapper{
float:right;
width:320px; display: inline;
overflow:hidden;}
  • Now replace it with the code below:
#sidebar-wrapper{
float:right;
width:150px; display: inline;
overflow:hidden;}
#rsidebar {
float:right;
width:150px;
padding-left:10px; display: inline;
overflow:hidden;
}

In the above code we  simply duplicated the original CSS style, named it #rsidebar, and then divided the width (320px) in to two equal values, but of course you may use other values as long as they’re equal. Also remember to adjust the padding and margins if necessary.

  • Next, using “Ctrl+F” again, search for the following:
<div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>
  • This is the beginning of the code that contains the codes of any widgets in your sidebar, and it should look something like this:
<div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>
WIDGET A’s CODE
WIDGET B’s CODE
WIDGET C’s CODE
Etc..</b:widget>
</b:section> </div>

What you’re going to look for next is the tag’s closing portion. Once you find it, add the following code right after it as shown below:

<div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>
WIDGET A’s CODE
WIDGET B’s CODE
WIDGET C’s CODE
Etc..</b:widget>
</b:section> </div>
<div id='rsidebar-wrapper'><b:section class='rsidebar' id='rsidebar' preferred='yes'></b:section></div>
  • Save your template, and you’re done!

Now go to the “Layout” section in your dashboard and you’ll notice that there are now two sidebar sections in your template. Enjoy!

 

 

Liked It ? Please Share

Comments

2 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Thats a great piece of information and exactly demonstrated what i m looking for. Thanks for the help.

  2. Ahsan Arshad says:

    Thank you for this awsome tutorial

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here