Welcome! This is a website that everyone can build together. It's easy!

Change Side Bar Layout

In the default layout in Blogger Beta, you get two sections in the side bar where you can add elements: the profile box and and one other side bar box. For some templates it would be nice to section off your side bar like this:Change Side Bar Layout - Blogger Garage
It is not too difficult to create new sections in your side bar so that instead of this:

Change Side Bar Layout - Blogger Garage

You can get this:

Change Side Bar Layout - Blogger Garage

NOTE: This code has been tested only on the 'rounders 1' blogger template. Let me know if you try it on another template and we can work to customize to your blog. Thanks!

In the 'edit html' view first click the 'expand widget templates' and then scroll down until you find the following code:
#sidebarbottom-wrap1 {
background:$mainBgColor url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#sidebarbottom-wrap2 {
background:url("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding:8px 0px 8px;
}

Copy the code you found in your template and paste it below itself (make sure you copy the code found in YOUR template, not the code above because code may vary slightly depending on your template). In the code you just copied change #sidebarbottom-wrap1 to #sidebarbottom-wrap3 and #sidebarbottom-wrap2 to #sidebarbottom-wrap4

A few sections below this find:
#sidebar h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}

Once again, copy this code and paste it immediately below itself. Change #sidebar h2 to #sidebar2 h2

We are now ready to create the new section. Scroll down until you find the existing side bar section which begins with this:

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

and ends with this:

</b:section>
</div></div>

Under the exsisting side bar section paste this code:

<div id='sidebarbottom-wrap3'><div id='sidebarbottom-wrap4'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
</div></div>

Save your template and go to the 'add elements view', you now have a new section in which you can add elements. To add even more sections repeat the above steps but change the numbers in the code that you just changed to new numbers (ex: from 3 & 4 to 5 & 6 and so on).


Latest page update: made by normc , Dec 4 2006, 7:44 AM EST (about this update About This Update normc Edited by normc

341 words added
3 images added

view changes

- complete history)
Keyword tags: layout sidebar (edit keyword tags)
More Info: links to this page

There are no threads for this page. Be the first to start a new thread.

Anonymous  (Get credit for your thread)


Top Contributors