Wednesday, May 4, 2011

Adding a separator line between your posts

This article shows how to put a horizontal separator line between posts in your blog, using either HTML's line command, or CSS rules.  It also has suggestions about ways of formatting these lines using different colours and line-styles.


There are at least four approaches to choose from if you want to put a divider between your posts in Blogger.  These days, I prefer the CSS-rule approach, because it's so easy and flexible.  But I've shown details of a few other methods too:
  • Manually add a horizontal line command to each post
  • Use the post-footer colour block as a line (in Designer templates only)
  • Add the HTML command for a line to the main section of your template, in one of the post-footers
  • Add a top or bottom-border to the CSS rule that formats the body of your posts.
The following sections give more detail about each option, including how to apply them to your blog, and their advantages and disadvantages.


Manually add a line to each post

When you are editing a post, you can put a horizontal line anywhere in the contents.

If Compose Settings (under Post Options) is set to  Interpret typed HTML, then you can just type <hr />, and Blogger will place a line like this in your post.


If your Compose Settings (under Post Options) is set to  Show HTML literally, then you need to switch to the Edit HTML tab before you type <hr />.

Disadvantage: If your post is set to display comments, or the blog is set to show the author, labels etc under the post, these items will be underneath any line that you add manually to a post.


Designer Template - post footer colour

If your blog has a designer template (ref, What sort of template have I got), then the Template Designer > Advanced tab may have an option for setting the background colour of the post-footer (depending on which template you are using).



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

Disadvantage:  The "line" might be a bit thicker than you like.   And if your post is set to display comments, or the blog is set to show the author, labels etc under the post, these items are shown right inside the footer line.





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.

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 != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>
OR
 <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.


Disadvantage:  you need to modify your template, and this does have some risks.  And it does use the <hr /> tag which some people (CSS purists) suggest is not a good idea.



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:

If you have a designer template, then the quick way to make this change is to add a CSS rule to your template.  The rule code to add is:
.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.



Related Articles:


What sort of template have I got

Disadvantages of editing your blog's template.

Adding a new CSS rules to your template

Centering the Post-title or Page-title

Putting HTML from elsewhere into your blog.

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

16 comments:

  1. thank uuu.. I used template designer to make border looks like a line.. so easy, works for me!

    ReplyDelete
  2. BTW, any idea to reduse the white space between the post titles and the separator line ?

    ReplyDelete
  3. Thank you so much! I've been looking everywhere about this
    But can I change the color of it? Instead of black?

    ReplyDelete
  4. Oh sorry, you've explained it then.
    Thank you :)

    ReplyDelete
  5. Hey! I would also like to know how to reduse the annoying white space between the post titles and the seperator line?? I've been searching all over for the answer.. I surely hope you can help :-)

    ReplyDelete
  6. Thanks for the tip!


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

    This code puts a line right under the post. Is there a way to put the line a bit lower. Or how do I insert some vertical space between the post-body and the line

    ReplyDelete
  7. Try adding this as well:

    .post-body {
    padding-bottom: 10px;
    }

    I'm no expert, but my understanding is that when the screen is drawn, the padding is applied first, then the border, then the margin.

    If that doesn't work, try asking in the Blogger Help Forum, someone there may know better than me.

    ReplyDelete
  8. This was so easy! Thanks!
    One question though: I put the line under my comments (so post-footer instead of body), but the line is super close to my comments. Any way to put space between the line and my comments?

    ReplyDelete
  9. .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;
    }

    this code works very well! :) But, would like to put the line a little bit lower OR even after labels & relase area.

    Can somebody helf me, please. Thank you!!

    ReplyDelete
  10. What command word would I use if I wanted a double line (such as the one shown third down on the photo at the top of this blog). I'm using CSS coding in the design template. Thanks!

    ReplyDelete
  11. Very, very helpful. Thank you. I've been looking for this for a very long time; but I never have found anything that actually worked before.

    I would like the line to align with everything else in my post, though, instead of being 11px or so to the right... I've tried padding from the right and aligning left; neither with any results. Not even bad ones.

    But regardless, very helpful and much appreciated. I doubt anyone will notice but me; I'm just quite anal about it. :)

    ReplyDelete
  12. Really Nice Information,Thank You Very Much For Sharing.
    Wordpress Development Company

    ReplyDelete
  13. Thanks this helped but when i add a border to my post-body class, it added a border above the comment section so I added a border-bottom style to my '.post-outer' class so that a line would appear below the comment section of each post instead of above it. :)

    ReplyDelete