Blog Design: How to Place a Border Around Content

Today will be the first DIY Blog Design post where you get to jump into some HTML!  Joy :)  I've picked one of the most simple tutorials to start you out because whelp, it's Sunday and we don't want to make your head spin on the weekend.  That's what Monday's are for.
Today's post is about putting that awesome border around the main content of your blog to separate your background from your posts.  It's a small detail that makes a huge difference.  It's most definitely not something you have to have, but if you would like it, it's very simple and I'd like to show you how to do it!

**For ALL html tutorials, I will be working from a SIMPLE template.  If you do not have a simple template, your codes may look different and may need to be tweaked a bit.

This is what the final result will look like.  I've done mine using a solid line, but you will be able to use solid, dashed, or dotted.  Wahoo :)  Now let me show you how to do it.

There is really only one step to do this.  Go into your blogger dashboard.  Go to template, and edit html.  Make sure to BACKUP your original template before doing anything with html.  Finally, hit proceed.

Adding the Code
Don't be scurred when you are in your html.  If you've never worked with it before, it's intimidating.  But once you know where to look for things, you'll be able to dominate it.  First, and easy way to find things it to hit 'Control-F' on your keyboard ('command-F' for a MAC).  This will bring up a little box with a search field (RED ARROW).  Type in what I have typed in (.content-outer) and hit ENTER.

A highlighted area will show up in your template.  This is where you will make the changes.  
By the BLUE ARROW you will see two lines that say border-right and border-left.  These are the parts you will ADD IN!  Type in exactly what I have typed in mine.  

To customize, you can change the part where it says 7px to a smaller or larger number.  This will change the thickness.  To change to dashed, delete solid and type 'dashed'.  To change the color, Google "HTML Color Codes" and change the #000000 to the color code of your choosing.  #000000 is black, FYI.

Hit 'Preview' down at the bottom to make sure it worked, then SAVE.  All done :)


Post a Comment