Adding two right sidebars in Blogger

[dkth]

I've searched for how to do this but most sites I end up on, are using code that doesn't work with mine and my template. Could someone show me how to split the sidebar to make it into two? Thanks !

finallymommy.blogspot.com

[Excavator]

Hello dkth,
Blogging CM's are really a pain to work with. If it will let you make these changes I've highlighted in red, you can use that space taken by the 120px of padding in the sidebar you now have.

Make sure you have a backup that you can restore from in case this all goes wrong!!!

CSS -

.post {
    line-height: 1.6;
    margin-bottom: 25px;
    overflow: hidden;
    /*width: 115%;*/
    word-wrap: break-word;
}
/*#sidebar {
    padding-left: 120px;
}*/
#side2 {
  height: 600px; /*demo only*/
  width: 120px;
  float: left;
  background: #f00; /*demo only*/
}

And add this bit to your markup -

  });
      </script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</div></div>
  <div id="side2">sidebar content here</div>
<div class="grid_4 omega section" id="sidebar"><div class="widget HTML" id="HTML745">
<form action="/search" class="searchform" method="get">
<input class="searchfield" name="q" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" value="Search..." type="text">
<input class="searchbutton" value="Go" type="submit">
</form>
</div><div class="widget PageList" id="PageList1">
<div class="widget-content">
<ul>
<li class="selected"><a href="http://finallymommy.blogspot.com/">Home</a></li>
</ul>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=7632064660253456606&amp;widgetType=PageList&amp;widgetId=PageList1&amp;action=editWidget&amp;sectionId=sidebar" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;PageList1&quot;));" target="configPageList1" title="Edit">
<img alt="" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18">
</a>

Something you need to now about is the Box Model. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

In otherwords, if you want you posts to be 15% wider than their container, you are taking room from those sidebars. If you want to change the sidebars width, you will need to look at those elements in #sidebar, like your 300px wide ads.

[dkth]

Wow, thank you a TON! No way for it to show up in the layout editor is there? Otherwise, im fine
(btw, what are blogging cm's?)
also what type of coding do i have? I noticed when looking for other ways to do this, the code was written differently and would not work, or maybe it's because im using an updated version?

[Excavator]

Originally Posted by dkth

(btw, what are blogging cm's?)

Whatever front-end your blog gives you for editing your site, some sort of Content Managment. They are always so limited in what they allow you to do.