Monday, January 24, 2011

How to Add Borders to a Blogger Footer Blogspot

In this Blogger tutorial I expand on my previous article about how to add a 3-4 column footer to Blogger by showing you how add border styling to the new footer. You will learn how to add a border around all of your footer columns or around only part of the footer columns. You will also learn how to add different border styles and border colors to customize your 3-4 column footer.

If you have just landed here and need instructions on how to add a 3 or 4 column footer to your Blogger blog then please refer to how to add a 3 or 4 column footer to a Blogger template (Blogspot template)

This is a walkthrough designed to assist bloggers with no experience of CSS styling who want to enhance their Blogger template with borders and other CSS styling. By following these examples you will gain the knowledge you need to make many types of custom changes to the borders of your new Blogger footer. For help with changing the background of your blogger footer please see my article How to Change the Background a Blogger Footer.

How to Add Borders to the Footer of a Blogger Template
To add lines (commonly known as borders) to a Blogger template footer we need to add some CSS styling.

Before beginning to add borders there are 3 values to consider:

  • width of the border (line thickness eg 1px, 2px, 3px and so on)
  • line style of the border (solid, dotted, dashed, double)
  • color of the border (hex color)

  1. How to Add a Border Around the Outside of a Blogger Footer
    First we add the border property and then add the border style, border width and the border color values. In these following examples just by changing these values we can achieve lots of different results.

    • To Add a Dashed Border Around the Outside of a Blogger Footer
      With the following code a dashed black line 1px thick will be added around the outside of the footer.

      #footer-columns {

      margin:0 auto;
      clear:both;
      }

      Change to:

      #footer-columns {
      border: 1px dashed #000000;
      clear:both;
      margin:0 auto;
      }


    • To Add a Dotted Border Around the Outside of a Blogger Footer
      By changing the dashed black line to a dotted border it is simple to get a different line style.

      #footer-columns {
      clear:both;
      margin:0 auto;
      }

      Change to:

      #footer-columns {
      border: 1px dotted #000000;
      clear:both;
      margin:0 auto;
      }


    • To Add a Solid Border (Blue 3px thick) Around the Outside of a Blogger Footer
      To add extra emphasis we can change the line color and its thickness. Here I have made the line blue rather than black and thickened it from 1px to 3px.

      #footer-columns {
      clear:both;
      margin:0 auto;
      }

      Change to:

      #footer-columns {
      border: 3px solid #336699;
      clear:both;
      margin:0 auto;
      }


  2. To Add a Partial Border to a Blogger Footer
    Sometimes we might want to add a border to only one part of the footer area rather than the whole thing. Again we add the border property but we append it with the following values: (top, bottom, left, right) depending on where we want to place the border.

    • To Add a Solid Border to the Top of a Blogger Footer
      #footer-columns {
      clear:both;
      margin:0 auto;
      }

      Change to:

      #footer-columns {
      border-top: 1px solid #000000;
      clear:both;
      margin:0 auto;
      }


    • To Add a Solid Border to the Bottom of a Blogger Footer
      #footer-columns {
      clear:both;
      margin:0 auto;
      }

      Change to:

      #footer-columns {
      border-bottom: 1px solid #000000;
      clear:both;
      margin:0 auto;
      }

    • To Add a Dashed Border to the Top of a Blogger Footer
      #footer-columns {
      clear:both;
      margin:0 auto;
      }

      Change to:

      #footer-columns {
      border-top: 1px dashed #000000;
      clear:both;
      margin:0 auto;
      }

    • To Add a Dotted Border to Both Top and Bottom of a Blogger Footer
      #footer-columns {
      clear:both;
      margin:0 auto;
      }

      Change to:

      #footer-columns {
      border-top: 1px dotted #000000;
      border-bottom: 1px dotted #000000;

      clear:both;
      margin:0 auto;
      }

    • To Add a Dotted Border 4px thick to Both Top and Bottom of a Blogger Footer
      #footer-columns {
      clear:both;
      margin:0 auto;
      }

      Change to:

      #footer-columns {
      border-top: 4px dotted #000000;
      border-bottom: 4px dotted #000000;

      clear:both;
      margin:0 auto;
      }


    • To Add a Blue Solid Border 5px thick to Both Top and Bottom of a Blogger Footer
      #footer-columns {
      clear:both;
      margin:0 auto;
      }

      Change to:

      #footer-columns {
      border-top: 5px solid #336699;
      border-bottom: 5px solid #336699;

      clear:both;
      margin:0 auto;
      }


In this Blogger tutorial (Blogspot tutorial) I have shown you how to make some simple customizations to the borders of a Blogger footer. This tutorial is intended as an extension of my earlier tutorial on adding a three or four column footer to Blogger. However it is also suitable if you are using a custom template and want to enhance the footer styling further. You have learned how to add borders to a Blogger footer and change the position, color, width and styling.

If you want to know more about CSS styling I will be publishing further articles in the future. Look out for my next article in this series How to Add Backgrounds to a Blogger Footer.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add a 3 or 4 Column Footer to a Blogger Template

17 comments:

  1. Hiii wizz..
    How are you??
    I usually visit your blog for new informative posts and today I visit your this post.
    This one is very cool and informative post..
    Keep it up....
    Thanks

    ReplyDelete
  2. Nice article, thanks for the information.

    ReplyDelete
  3. Interesting article i must say with some very informative information.. There is one question in my mind can we adjust the height and width of footer according to our template?

    ReplyDelete
  4. I took a look at your blog. Your footer seems pretty developed already. Are you wanting to add another column. You could make it wider by making the width 100%

    ReplyDelete
  5. mm nice.. pls visit www.jjtamil.tk

    ReplyDelete
  6. Hey thanks for this useful information..
    MLM software

    ReplyDelete
  7. my first time visiting this blog, as a whole after I read some articles quite interesting to read

    ReplyDelete
  8. Thank you. This is exactly what I was looking for.

    ReplyDelete
  9. thanks for the tips, i'll improve my blog. :D

    ReplyDelete
  10. i have read all the code which are given here these are very good and easy for use.

    ReplyDelete
  11. Hi! Your post is so informative! Thanks to you I have found the information that I have been looking for for a long time. Thank you!

    ReplyDelete
  12. just also post sir how to edit new blogger template of picture window.I just tested your code and it not work in new blogger window.Thanks

    ReplyDelete
  13. Hi Arnel. Not sure why you would want to add styling to the footer in the picture window template as it already looks pretty nice. But say for arguments sake you wanted to add a border to the top of the footer you could do it by adding the border-top code to: .footer-inner

    eg

    .footer-inner {
    padding: 10px $(main.padding.sides) 20px;
    border-top: 5px solid #336699;
    }

    Hope this is helpful to you :-)

    ReplyDelete
  14. Thanks mate you really rocked it i was just looking for this thanks

    ReplyDelete
  15. Thank you for the fresh content and information you provide. This really helps learner like me. Keep sharing knowledge. Happy to read.
    Website for school uk

    ReplyDelete