Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding two right sidebars in Blogger

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,742
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 -
    Code:
    .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 -
    Code:
      });
          </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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,742
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by dkth View Post
    (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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •