Already a member?
Sign in
Welcome! This is a website that everyone can build together. It's easy!
- EasyEdit
- Edit tags
- Email page
-
(what's this?What are these tools?
People just like you can add or edit the content on this site. If you want to try editing, but aren't ready to add to this site, try our demo area.
Read more about editing pages at Wetpaint Central.
)
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:
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:
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).

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;
}
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
Edited by normc
341 words added
3 images added
view changes
- complete history)
341 words added
3 images added
view changes
- complete history)
More Info: links to this page


