Adding a separation line between your posts

This article shows how to put a horizontal separator line between posts in your blog, using either the HTML line command or CSS rules. It also has suggestions on ways to shape these lines with different colors and line styles.

There are at least four approaches to choose if you want to put a divider between your posts in Blogger. These days, we prefer the CSS rule approach, because it’s so easy and flexible. But I have also shown details of a few other methods:

  • Manually add a horizontal line command to each post
  • Use the post-footer color block as a line (only in Designer models)
  • Add the HTML command for one line to the main section of your modelin one of the post-footers
  • Add a top or bottom border to the CSS rules that form the body of your posts.

The following sections give more detail about each option, including how to apply it to your blog, and its advantages and disadvantages.

Manually add a line to each post

When editing a post, you can place a horizontal line anywhere in the content.

In the post-editor:

  • If the Post Options > Composition Settings is set to Interpret HTML typed, then you can just type

    and Blogger will put a line like that in your post.

  • If Post Options > Composition Settings is set to Show HTML Literal, then you need to switch to the HTML tab before typing

    .

Disadvantage: If your post is set up to show comments, or your blog is set up to show the author, tags, etc. below the post, these items will be below any line you manually add to a post.

Designer theme – footer color

If your blog has a designer theme (ref, What kind of theme do I have), then the Theme Designer > Advanced tab may have an option to set the background color of the post-footer (depending on the theme you are using).

If you use a dark color (or have a dark background and use a light color), this makes the post-footer look like a line.

Disadvantage: The “line” may be a little thicker than you like. And if your post is set up to show comments, or your blog is set up to show the author, tags, etc. below the post, these articles are shown right in the footer line.

Add a command line to your theme

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

Edit your blog’s theme in the usual way.

Most themes have three footer lines: what is in each depends on the theme, and how you have arranged the articles in the Layout > Blog Posts editor. Look at the theme for the code like this:

OR

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


Disadvantage: you need to modify your theme, and this has some risks. And it uses the tag that some people (CSS purists) suggest is not a good idea.

Improvements to the basic command


There are many ways to modify the code. For instance


– to align left


– to change the color


– to make it tighter

See w3c.schools


tag for more information.

Add a border to the CSS rule that formats your posts

The cascading rules in your theme control most aspects of your blog. They can be a very powerful way to control how your blog looks – and give you a quick way to add a line between your posts.

What to do

If you have a designer model, then the quick way to make this change is to add a CSS rule to your theme. The rule code to add is:

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

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

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

Making more complex changes

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

1 Edit your theme in the usual way.

3 Search .post-body in the rules section. It will be 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 he can’t find a .post-body statement in the rules section of your template, then you need it add it.

Put it somewhere:

Afterwards Before  ]]>

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

The statement to add is something like the following, although you may want to try 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 I draw the line in black – you might like to use a different color, or use the word “solid” instead of “dotted” to make a firmer line.

Alternatively, you can say border-top: 1px dotted #666666; – this puts a line at the top of the body of each post, just below the title.


Related articles

What kind of theme do I have

Disadvantages of editing your blog theme

Adding a new CSS rule to your theme

Centering the Post-title or Page Title

Put HTML from elsewhere on your blog.

BB link code (forum):

Leave a Comment