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:
#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).



7 comments:
I can't figure out how to edit the "About Me" section in the sidebar to the right. How do I get in there?
Thanks,
Ivan
catch20two@yahoo.com
all I want to do is fix it so the titles of all 15 of my articles appear in the sidebar, instead of only 10. There's room. What do I do?
Shelley,
I may be misunderstanding you, but if you are only going to be posting 15 articles on your blog you would be better off to put a list of links on your side bar. Your blog currently uses the 'previous posts' list which is limited to 10 posts maximum. Let me know if you need help making a list of links to put on your blog.
~ BG
BG,
I have been customising my sidebar. I suddenly have bullets in part of my sidebar, and some of it has now left-aligned instead of center as i specified.
Can you help?
Its at www.thepoisondoughnut.blogspot.com
Pinky
Pinky, I was just about to write you but noticed that you have fixed your side bar already, let me know if you have more questions.
~ BG
Hi. Is it possible to move all my "stuff" from my old "classic" template to the new "Layout" version? I tried cutting and pasting but it wouldn't let me.
Thanks.
Hey,
Your instructions are great! I can finally create my own header, and make my personal blog look a bit different. I have a question about backgrounds, though. I had originally had a template in the old blogger, but I don't know how to change that same template (with a photo in the background) to the new blogger to use the new "layout" feature. Our personal blog will be at dsgrant.blogspot.com, but I want to change the look of it. Then create a new "ministry" page to look like the one at dsgrant.blogspot.com. Obviously it needs some tweeking. I'm not sure how to center the Derek and Sarah Grant and change the font of the header and all that. Anyways, my main question is how to switch this old html template into the new blogger? Is that too hard to do?
Post a Comment