Docstoc

Divide Blogger Sidebar In Two Parts

Document Sample
Divide Blogger Sidebar In Two Parts Powered By Docstoc
					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!

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:5
posted:9/27/2012
language:English
pages:2
Description: Divide Blogger Sidebar In Two Parts