Venus Trapped in Mars Sports and Lifestyle Blog Dallas

19 July 2014

How to Add a Dividing Line Between Blog and Sidebar in Blogger




Step One // Two: Go to blogger's layout tab, then select Template Designer.

Step Three // Four // Five: Once in template designer, go to the advanced tab and scroll down to Add CSS.


 Step Five: Copy and paste the code I've listed for you below, based on which side your blog's sidebar is on. 




If your sidebar is on the right side, copy and paste the following code into your advanced CSS text box:

.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid #CCCCCC !important;
}



If your sidebar is on the left side, copy and paste the following code into your advanced CSS text box:

.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid #000000 !important;
}


Now, time to customize that code to fit your blog's design:

Increase 1px based on how thick you want your line to be (i.e. 4px for a thicker line)

Change solid to dashed // double // dotted for different line styles 

Change #000000 (basic black) to whatever color you want your line to be. If you aren't sure of your color's hex value (those 6 numbers) check out this website for a list of color values.  



Click "Save Template" and you're done! Please don't hesitate to ask any questions you might have, in the comment box below! 


description

15 comments :

  1. Replies
    1. Have you previously added any CSS code in the advanced editior?

      Delete
    2. Oh I have it working now. Is there anyway to get not as close to the sidebar? Sounds strange but if you look(http://thebusybee39.blogspot.co.uk) you will see what I mean!

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Thank you so much for posting that Sarah I have dying to know how to do that!

    ReplyDelete
  4. Thanks for sharing, Sarah! I've always wondered how to get a dotted line instead of the (ugly) Blogger default line in the template editor.

    ReplyDelete
  5. Hi there! Just wanted to say thank you so much for doing posts on how to fix up your blogs. I am brand new to blogging so your posts have been extremely helpful for me to understand. I am also posting a few of your links on my blog, http://theswagsinthebagblog.blogspot.com as references for other newbies to learn how to build their blogs. Thanks again for making this all easier to understand!

    ReplyDelete
  6. Great tutorial. Very helpful for new bloggers.

    ReplyDelete
  7. You win at being the best blogger ever in the whole world ever.

    ReplyDelete
  8. I know I've said it a billion times but I love these Saturday sessions! If it isn't too much trouble, could you possibly do one on how you can customize comments? I notices yours is much more unique than the usual blogger one.....

    ReplyDelete
    Replies
    1. This is a great question! I'd love to know how to do this too.

      Delete
  9. ooooh! i think this was my question :)
    thank you! xo

    ReplyDelete
  10. have i mentioned how much i love the new saturday sessions image? because I love it. you are the most talented!

    ReplyDelete
  11. It didn't work for me adding it in the CSS box, I think because I've changed the template too much with additional HTML. Where would you add it in a full HTML template, if you wanted to do it manually? Thanks!

    ReplyDelete
  12. How do you put these in between gadgets on your sidebar?

    ReplyDelete

Comments make my heart go boom boom.

I respond to all comments, if you are leaving me comments and not getting a reply, you may be a no-reply blogger. Fix it HERE!