How To Add a separator dotted line between your posts in Blogger

Add a line-command to your template

If you don’t like the other two approaches, you can change your template to add a horizontal line. To do this:

1 Edit your template:

In Sept-2011-Blogger (ie the new interface) go to Template > Edit HTML > Proceed
In pre-Sept-2011-Blogger (ie the old interface) go to Design > Edit HTML.

2 Download a full copy of your template, and put it somewhere safe (in case things go wrong, and you need to go back to where you were).

3 Click on Expand Widget Templates.

4 Most templates have three footer lines: what is in each one depends on the template, and how you have arranged the items in the Layout > Blog Posts editor.

Look at the template for code like the following,

       <div class=’post-footer-line post-footer-line-2‘><span class=’post-labels’>
        <b:if cond=’data:post.labels’>
          <data:postLabelsLabel/>
          <b:loop values=’data:post.labels’ var=’label’>
            <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != "true"’>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

<div class=’post-footer-line post-footer-line-3‘/>
</div>

and add the <hr /> command to which ever one you want, for example

<div class=’post-footer-line post-footer-line-3’/>
<hr />
</div>

Advantage: you can easily place the divider line anywhere you want it, relative to the other items in your post-footer.

Enhancements to the basic <hr /> command:

There are lots of ways you can modify the <hr / > code. For example

<hr style=”text-align: left;” /> – to left-align it

<hr style=”color: red;” /> – to change the colour
<hr style=”width: 50%;” /> – to make it narrower

See w3c.schools <hr /> tag for more information.

Add a border to the CSS rule that formats your posts

The cascading-style-sheet rules in your template control most aspects of how your blog looks. They can be a very powerful way to control how your blog looks.

Quick option:

.post-body
{
border-bottom:1px dotted #666666;
}

or this one if you want the border at the top of each post:

.post-body
{
border-top:1px dotted #666666;
}

In-depth

The specific CSS rule that controls how the “body” of your posts look is .post-body. To make changes to it:

1 Go to Design > Edit HTML

2 Download a full copy of your template, and put it somewhere safe (in case things go wrong, and you need to go back to where you were).

3 Look for .post-body in the rules section of your template. It will look something like this, but the exact lines and values may be different:

.post-body {
margin-top: 0;
margin-$endSide: 2px;
margin-bottom: 0;
margin-$startSide: 3px;
}

4 If you can find a .post-body rule, then add this line, just before the } character.

border-bottom:1px dotted #666666;

5 If you cannot find a .post-body statement in the rules section of your template, then you need to add it.

Put it somewhere:

After <b:skin><![CDATA[/*

Before ]]></b:skin>

But not in the middle of any other rules: look at how the rest of that section of your template is laid out for clues.

The statement to add is something like the following, though you may want to try out different values for parts of it.:

.post-body {
border-bottom:1px dotted #666666;
margin-top: 0;
margin-$endSide: 2px;
margin-bottom: 0;
margin-$startSide: 3px;
padding-top:10px;
margin-top:20px;
}

Alternative formats:

The #666666 means draw the line in black – you may like to use a different colour, or use the word “solid” instead of “dotted” to make a firmer looking line.

As an alternative, you can say border-top:1px dotted #666666; – this puts a line at the top of the body of each post, just underneath the title

How To add line in blogger post

How To add image in blogger post