Divider (line) Between Posts in Blogger

October 28, 2008

If you would like to put customized divider between posts, something nice that will separate them, and you don't want a regular line, follow this easy instructions.

First of all, you should make your picture (image) that will be your divider, or find some on the web (that's free to use).
Anyway, you should be careful that width of your divider is smaller than width of your wrapper section (post section), so it does not get cropped.

#main-wrapper {
width: 410px;
float: $startSide;

First, you have to upload your picture (divider) on free web hosting service. When you upload it, you'll have the URL link of picture.
There are lots of free hosting services. My favorites are TinyPic, PhotoBucket...

Now, there are two ways of doing this (do the first one, and if you'll have some problems, then go with number 2):

1.
Ok. Back-up your template folks. And go to:

DASHBOARD ► LAYOUT ► EDIT HTML, find the following part of code (use CTRL +F, or Option + F for Mac):

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

....REPLACE the code from above with following:

.post {
background: url(http://i36.tinypic.com/xqid55.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:3.5em;
}

...your code may be a bit different, important is to find ".post" paragraph...
...replace the part in orange with the URL of your hosted picture (divider)...
...you can increase / decrease the value of "padding-bottom" to make some space between divider and bottom of the post...

There it is. It's not a beauty, but you get the point....

2.
Use this example only in case the upper one is not working for you....
Back-up your template folks. And go to:

DASHBOARD ► LAYOUT ► EDIT HTML ► hit EXPAND WIDGET TEMPLATES

CTRL + F (Option +F), then find the following code in code section:

<div class='post-footer-line post-footer-line-3'/>

Then right AFTER than line, insert this part of code:

<center><img height='20' src='URL OF YOUR PICTURE'/></center>

Height = 20 refers to actual height of your picture....so it doesn't get cropped. And you have to replace the part in red with your picture.

Smile!