Blogger Tips
In today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most of us are hoping to create.
This tweak is very easy and well within the capabilities of any Blogspot blogger. Only a few simple changes to your Blogger template are required and these are in the CSS styling section.
By way of example I will use a divider that I downloaded from the internet free by searching for free divider graphics. Here are some sample dividers you can use to get started:
URL address:
http://2.bp.blogspot.com/_vLeiVavkV_M/SthJsqCtR3I/AAAAAAAAB9o/tO5gQME5P8Q/s400/ribbon.gif
URL address:
http://2.bp.blogspot.com/_vLeiVavkV_M/SthL_Aqzv6I/AAAAAAAAB9w/Icu8yWmless/s400/bar1.gif
URL address:
http://1.bp.blogspot.com/_vLeiVavkV_M/SthNNybvGoI/AAAAAAAAB-Q/RGApKNx42RE/s400/barbsmpl.jpg
URL address:
http://4.bp.blogspot.com/_vLeiVavkV_M/SthNZ9ciE-I/AAAAAAAAB-Y/TykAigqgPxQ/s400/bar47.gif
How to Add a Divider Between Posts in Blogger
Tips and Troubleshooting
In today's Blogger tutorial you have learned how to insert a divider between your Blogger posts to enhance the look of your Blogger template (Blogspot template). You can either make your own post divider or download one from the myriad of free website dividers available on the net.
Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
- How To Customize Blogger Comments By Adding A Background Color And Border
The comments are an essential part of any blog as in them readers express their opinions about a post or a blog, thus it is important to spend a little of our time to make this part looking more stylish, accessible and neat. To put our comments in order,...
- Add Or Change Background Image Of A Blogger Template
In today's Blogger tutorial (Blogspot tutorial) I will show you how to both add a background image to a Blogger template if you don't have one already or change the existing background of your Blogger template. I have chosen to write this article...
- How To Align And Justify Blogger Posts
This is the second article in a series about CSS styling tricks and tips for Blogger written with Blogger beginners and novices in mind but suitable for all bloggers who want to customize their existing Blogger template. While the first article dealt...
- Blogger Post Image Borders Change Or Remove
Sometimes you may want to remove, delete or change the image border of a custom Blogger template or default Blogger template (Blogspot template). In this Blogger tutorial you will learn how easy it is to make changes to your template so that you can get...
- Increase Image Size Blogger Blogspot Blog
In this tutorial you will learn how to increase the displayed size of the images you upload to your Blogger Blogspot blog by entering your own dimensions. This is a very easy trick requiring no change to your Blogger template. It is suitable for anyone...
Blogger Tips
Add a Post Divider Between Blogger Posts
In today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most of us are hoping to create.
This tweak is very easy and well within the capabilities of any Blogspot blogger. Only a few simple changes to your Blogger template are required and these are in the CSS styling section.
By way of example I will use a divider that I downloaded from the internet free by searching for free divider graphics. Here are some sample dividers you can use to get started:
URL address:
http://2.bp.blogspot.com/_vLeiVavkV_M/SthJsqCtR3I/AAAAAAAAB9o/tO5gQME5P8Q/s400/ribbon.gif
URL address:
http://2.bp.blogspot.com/_vLeiVavkV_M/SthL_Aqzv6I/AAAAAAAAB9w/Icu8yWmless/s400/bar1.gif
URL address:
http://1.bp.blogspot.com/_vLeiVavkV_M/SthNNybvGoI/AAAAAAAAB-Q/RGApKNx42RE/s400/barbsmpl.jpg
URL address:
http://4.bp.blogspot.com/_vLeiVavkV_M/SthNZ9ciE-I/AAAAAAAAB-Y/TykAigqgPxQ/s400/bar47.gif
How to Add a Divider Between Posts in Blogger
- Login to Blogger if not already logged in
- From the Dashboard navigate to Layout > Edit HTML
- Back up your Blogger template as a precaution by downloading it to your computer
- Find the following line of code in your template:
.post {
You are likely to have something like this in your template already:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
} - Paste the following lines of code to this block making sure you paste them before the closing curly bracket:
background: url(http://2.bp.blogspot.com/_vLeiVavkV_M/SthJsqCtR3I/AAAAAAAAB9o/tO5gQME5P8Q/s400/ribbon.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em; - If any lines are duplicated remove them.
- Remove any line beginning with: border-bottom: eg
border-bottom:1px dotted $bordercolor;
- You will now have a block of code which looks like this plus any extra lines from the existing code in this block:
.post {
background: url(http://2.bp.blogspot.com/_vLeiVavkV_M/SthJsqCtR3I/AAAAAAAAB9o/tO5gQME5P8Q/s400/ribbon.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
} - Click on Save Template to save your changes
- Click on View Blog to see your new post divider between posts
Tips and Troubleshooting
- To change the divider to one of the above replace the URL address of the image (in red) with the URL address of the new image you want to use.
- To use your own divider image download to your computer from the internet and then save the image to a photo image service like Photobucket. Replace the divider image URL address (in red) with the URL address of your new image
- To increase the padding around the divider change the following line of code:
padding-bottom:1.5em;
to
padding-bottom:2.5em;
In today's Blogger tutorial you have learned how to insert a divider between your Blogger posts to enhance the look of your Blogger template (Blogspot template). You can either make your own post divider or download one from the myriad of free website dividers available on the net.
Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
- How To Customize Blogger Comments By Adding A Background Color And Border
The comments are an essential part of any blog as in them readers express their opinions about a post or a blog, thus it is important to spend a little of our time to make this part looking more stylish, accessible and neat. To put our comments in order,...
- Add Or Change Background Image Of A Blogger Template
In today's Blogger tutorial (Blogspot tutorial) I will show you how to both add a background image to a Blogger template if you don't have one already or change the existing background of your Blogger template. I have chosen to write this article...
- How To Align And Justify Blogger Posts
This is the second article in a series about CSS styling tricks and tips for Blogger written with Blogger beginners and novices in mind but suitable for all bloggers who want to customize their existing Blogger template. While the first article dealt...
- Blogger Post Image Borders Change Or Remove
Sometimes you may want to remove, delete or change the image border of a custom Blogger template or default Blogger template (Blogspot template). In this Blogger tutorial you will learn how easy it is to make changes to your template so that you can get...
- Increase Image Size Blogger Blogspot Blog
In this tutorial you will learn how to increase the displayed size of the images you upload to your Blogger Blogspot blog by entering your own dimensions. This is a very easy trick requiring no change to your Blogger template. It is suitable for anyone...