Adding Border(s) around the Footer Columns: How to Add Border(s) around the Footer Columns of Blogger Blog?

You can easily add borders around the footer sections. In the hub How to Add Three Columns to Blogger Footer Section? you already have learned how to add three columns in the footer section. Now, it's time to play with styles and outlook. If you add borders around the footer columns, then your footer section will look great. You may add borders above the footer columns or below the footer columns or around the whole footer columns. This page contains the information to add border(s) around the footer section.

To add border(s) around the footer columns of your blogger blog, you just have to play with the CSS code only. You don't need to modify the whole CSS code. The only codes which you need to modify looks like the following:

Look at the second line of the above code segment. To work with border, we only need that code segment (to see the full CSS code visit How to Add Three Columns to Blogger Footer Section?). From the second line, you see like border-top:1px dotted #999999. This line is responsible to all kinds of border styling.

border-top:1px dotted #999999 defines four things:

• the border position (border-top),
• the border pixel width (1px)
  
• the border style (dotted) and
• the border color (#999999)

You can create borders around, top or bottom of your blog's footer columns. The necessary conditions are:

• border → creates a border around the footer columns
• border-top → creates a border only above the footer columns
• border-bottom → creates a border only below the footer columns

The border width is also an important thing to give an extra style of your blog. You may set border width according to your wish. You may set border width 1px, 2px, 3px... etc. according to your wish. The more the value will be increase, the greater the width of the border will be increased.

You may also change the style of your border outlook. You may select style as solid, dashed, dotted... etc. according to your own wish.

Moreover, you are find full freedom to select the border color. Just put the hex value of your favourite color and thats done. To see the color value of different color, you may visit color codes.

By following the tutorial How to Add Three Columns to Blogger Footer Section? you can easily add the three columns footer like the following. Now, if you see the outlook of your blog then the footer section may look like the following figure:

Now, we want to modify the code and want to draw a border around the footer columns. Suppose, we want to create a border around the footer columns. We choose the width of the borders will be 3 pixel and the color of the border will be Royal Blue1 (Hex Value = #306EFF). So, for doing these modification, the code will look like the following:

Now, after saving the above code, your blog's footer look like the following figure:

I create a blog to show you the output of this tutorial. I use only the modified code which I discussed as an example. You may choose your own way also to modify the footer clolums border.

Click here to see the live view of this tutorial's output

By following the above mentioned tutorials you can easily add border(s) around the footer columns of blogger blog.

© This tutorial is written by Blog.
For more blogspot tutorials, visit http://hubpages.com/hub/blog-index