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

How to Add a Table to Blogger Blogspot Post

This Blogger tutorial (Blogspot tutorial) explains how to put a table into a Blogger post. You will learn how to create tables in Blogger ranging from a simple table to a more complex table with alternating colors.

We will start with a basic table and gradually add CSS styling to the table to improve the look and functionality until we have built the table pictured directly below. No knowledge of CSS and HTML is assumed so this Blogger tutorial is suitable for absolute blogging beginners.

A Blogger Table Caption

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

Tables are a useful way to display information particularly tabulated information. Tables are good whenever you want to align information so that it is easy to read and understand. You can add text, hyperlinks and even images to a table which makes them very useful for presenting information.

There is no easy way to add tables in Blogger yet. Even if you are using the new editor you will note that no table button is provided. Fortunately it is easy enough to use a bit of CSS styling to spruce up a table and enter this manually into a Blogger post.

How to Add a Table to Blogger Posts
First you will learn how to add a simple table to Blogger. We are going to start with a table with 3 columns and 4 rows including a header row. Then I will show you step by step how to add different features to the table including how to add extra rows, a background color to the header, a border, a caption, change the size of the table, center align the table and more.

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

1. In Blogger open either a new post or an existing post that you wish to add a table to
   
   
2. Click on the Edit HTML tab on your Blogger editor
   
   
3. Copy the following code into your Blogger post which will produce the basic table as shown above:
   
   

   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr>
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
4. Make changes to the table to suit your own Blogger template if necessary by changing the following:
   
   

   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">

   
   
   • Border width (blue)
     
   • Border color (black)
     
   • Background color (red)
     
   • Table width (orange) Can be a percentage or actual width eg 500px
     
   
   
5. Now we are going to fix an annoying problem in Blogger which renders too much white space above the table. We do this by adding the following styling denoted in red directly above the table tag and adding a closing </div> at the end of the table code
   
   

   <style type="text/css">.nobrtable br { display: none }</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr>
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table></div>
   

   
   
6. Let's add some further styling to our table header to improve the look of our table as denoted in red. Change the background color and color attributes to suit your own color scheme if you wish
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none }</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
7. Now let's add another row to our table for Blogger so you can see how this is done
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none }</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
8. In this step we are going to center the contents of our Blogger table. This can be done in several ways but we are going to take a short cut here by assigning a style to every table row
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} </style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">

   
   
9. Now we are going to jazz up our Blogger table by adding alternating colored rows to improve readibility and appearance. By far the easiest way to do this is to assign a class.
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;}</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr class="alt">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr class="alt">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
10. It is also easy to add a caption to your Blogger table. For a caption above the table simply add the caption line as shown in red. For a caption below the table add the caption line in red and a style as shown in blue
    
    
    
    
    

    A Blogger Table Caption

    Table Header	Table Header	Table Header
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell

    
    
    

    <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
    <caption>A Blogger Table Caption</caption>
    <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    </table>
    

    
    
    
11. One more important property needs to be addressed in our new Blogger table to improve the look. We can reduce the double border into a single one. The easiest way to do this is to change the cellspacing to zero as denoted in red. Or, alternatively we can apply the border collapse property to our table as shown in blue. Note: Border collapse may not be supported by all browsers particularly if the cellspacing attribute is defined also)
    
    
    
    
    
    
    

    A Blogger Table Caption

    Table Header	Table Header	Table Header
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell

    
    
    

    <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="10" cellspacing="0">
    <caption>A Blogger Table Caption</caption>
    <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    </table>
    

    
    
    
12. Now go ahead and add your data to your new Blogger table. Filling in each instance of "Table Header" and "Table Cell" with your own data. The information you add to the Blogger table can be text, hyperlinks or even an image
    
    
13. Save your changes to the Blogger table by saving and publishing your post
    

Please feel free to use this Blogger table as a template whenever you need to add a table to your Blogspot post. If you want to regularly add a table to your Blogger posts that consistently looks the same you could consider adding the table CSS styling to your Blogger template.

In this Blogger tutorial (Blogspot tutorial) I have demonstrated how to build a complex table in HTML and CSS to insert into a Blogger post. You have learned how to manipulate a variety of table properties and attributes to create a table for Blogger that matches the color scheme of your blog and is functional and appealing.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Change the Bullet Point Style in Blogger (Blogspot)
How to Remove Image Border in Blogger Template Simple
How to Change or Delete Image Borders in Blogger Posts
How to Add CSS Styling to Blockquotes in Blogger
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template

Add a Comments Counter Button to Blogger Blogspot

In this Blogger tutorial (Blogspot tutorial) you will learn how to add a comments counter button to Blogger (Blogspot) to show off the number of comments each of your posts has received.

A comment counter button (bubble) will have the effect of encouraging visitors to comment on your Blogger blog and also help to highlight the credibility of your articles.


Installing this Blogger hack to add a comment counter button only takes a few minutes. The changes needed to add the comment bubble to Blogger while not difficult do involve adding a small snippet of code to your Blogger template in two places. For this reason I strongly urge you to back up your Blogger template before attempting this blogger hack.

Blogger Tutorial Difficulty - easy to medium

How to Add a Comments Counter Bubble to Blogger
A Step-by-Step Walkthrough
The following steps will insert a fully clickable comments counter button on the same line as the post title in Blogger. The comments counter is right aligned by default.

1. Log in to Blogger and the blog you wish to apply these changes to
   
   
2. Select Design > Edit HTML
   
   
3. Click on Download Full Template to back up your template before you make any changes
   
   
4. Check the Expand Widget Templates box
   
   
5. In the CSS Styling section of your Blogger template and just before the ]]></b:skin>
   
   

   .comments-button {
   width : 48px;
   height : 48px;
   background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOAtKzKSu1isk_ogKXQ_AjufJKPdBZMhkA9aWct6HpXPlvKNUli1ZVovL62YABdIvpbrlPbslmPSlUG2KJcmwJeLFwt-LDPQQGF2lehA-5MmT2ZuyMB38il5UwmdhdHQ9jsaTysJljwFKE/s200/comment-counter-bubble.png) no-repeat;
   float : right;
   font-size : 18px;
   margin-top : -15px;
   margin-right : 2px;
   text-align : center;
   padding-top:10px;
   }

   
   
6. Now find the following block of code using CTRL key + F
   
   

   <b:includable id='post' var='post'>
   <div class='post hentry uncustomized-post-template'>
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>

   
   
7. Copy this code block:
   
   

   <b:if cond='data:post.allowComments'>
   <a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
   </b:if>

   
   
8. Insert as follows:
   
   

   <b:includable id='post' var='post'>
   <div class='post hentry uncustomized-post-template'>
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.allowComments'>
   <a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
   </b:if>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>

   
   
9. Save template and then view blog to admire your new comment counter badge.

Tips and Troubleshooting

1. If you prefer you can replace the button image I have provided with your own image. You can find other buttons easily enough by doing a Google search with a term like "speech button icons".
   
   Upload your button to a hosting service such as Photobucket and change the URL address of the image in the CSS styling section. The following example will render a smaller blue button. Note I have reduced the font size to accommodate the change. You may need to play around with the settings to get the font sizing right for your image.
   
   

   .comments-button {
   width : 48px;
   height : 48px;
   background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCESuDqVaLeY9cdRLRXZ2N-VaHdnk7CT23nyCgCkLW-0fcwu3iXiYF3supJppw7Qb_XuiF2Z-McJQal8udJl7ND0PlzSBHjrY-TH-bxacOTkmaJ8mzuSz7MJq9gI4oQ9Hx2mnKTbgj87e/s200/comment-counter-bubble-2.png) no-repeat;
   float : right;
   font-size : 14px;
   margin-top : -15px;
   margin-right : 2px;
   text-align : center;
   padding-top:10px;
   }

   
   
   
2. If you want your comment counter to be left aligned instead of right you will need to change the CSS styling from float:right; to float:left;
   

In today's Blogger tutorial I have covered how to add a comments counter to a Blogger blog (blogspot blog) that will appear to the right of your blog post title. A comments counter is a way to encourage visitors to comment and is a way of showing off the credibility of your blog posts. Good luck! Any comments about installing this blogger hack are most welcome.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Tips to Add Digg Button to Blogger Blogspot
Add Twitter Followers Counter to Blogger
Add Twitter Badge or Button to Blogger
Add a Social Bookmarking Button to Blogger
Add Social Bookmark Buttons to Blogger