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.
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)
- 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;
}
- To Add a Dashed Border Around the Outside of a Blogger Footer
- 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;
}
- To Add a Solid Border to the Top of a Blogger Footer
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.
How to Add Internal Links Within Blogger Posts
02/07/2012 - 1 CommentsEach link identifier needs to be enclosed in inverted commas. Make sure to match up the correct identifier…
Add Meta Tags to Blogger for Better SEO
04/10/2013 - 0 CommentsToday i going to share Meta Tags For Blogger For SEO. This is my first post on SEO.Meta tags have prime…
Verified Fb Page tick mark 4 Blogger Author Comments
13/08/2013 - 0 CommentsDo you noticed a tick mark in some Facebook Pages like Actors, Political Leaders. Verified mark is only…
Top 5 Websites to Make Money by Uploading Files
16/09/2013 - 0 CommentsMaking money through easy means is always what people look for. However what is really important is the fact…
Cool Stylish CSS Labels For Blogger
30/09/2013 - 0 CommentsFriends, This is a widget to modify your label to a brick style with CSS effects. It is very effective widget…
How to Add a Comments Counter Button to Blogger Blogspot
27/06/2012 - 1 CommentsIn this Blogger tutorial (Blogspot tutorial) you will learn how to add a comments counter button to Blogger…
How to Add a Post Divider Between Blogger Posts
13/07/2012 - 1 CommentsIn today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post…
4 amazing New Improvements to Blogger Template HTML Editor
27/09/2013 - 0 CommentsGoogle Blogger has just updated the Blogger Template HTML editor, and added four new features to make your…
Random Posts...!!!
Posted in: add borders to blog,blogger,blogger footer,blogger tips,blogger tricks,blogger tutorials,Blogspot,Borders,Footer
0 comments:
Post a Comment
Please feel free to comment on this topic.