News!! Adding A Separator Delineate Of Piece Of Occupation Betwixt Your Posts

This article shows how to pose a horizontal separator business betwixt posts inwards your blog, using either HTML's business command, or CSS rules.  It also has suggestions nearly ways of formatting these lines using dissimilar colours too line-styles.

There are at to the lowest degree iv approaches to direct from if you lot desire to pose a divider betwixt your posts inwards Blogger.  These days, I prefer the CSS-rule approach, because it's therefore slow too flexible.  But I've shown details of a few other methods too:

• Manually add together a horizontal business command to each post
• Use the post-footer color block equally a business (in Designer templates only)
• Add the HTML command for a business to the primary department of your template, inwards i of the post-footers
• Add a transcend or bottom-border to the CSS rule that formats the torso of your posts.

The next sections laissez passer to a greater extent than item nearly each option, including how to apply them to your blog, too their advantages too disadvantages.

Manually add together a business to each post

When you lot are editing a post, you lot tin pose a horizontal business anywhere inwards the contents.

If Compose Settings (under Post Options) is ready to  Interpret typed HTML, therefore you lot tin but type <hr />, too Blogger volition house a business similar this inwards your post.

---

If your Compose Settings (under Post Options) is ready to  Show HTML literally, therefore you lot involve to switch to the Edit HTML tab earlier you lot type <hr />.

Disadvantage: If your ship service is ready to display comments, or the weblog is ready to exhibit the author, labels etc nether the post, these items volition endure underneath whatsoever business that you lot add together manually to a post.

Designer Template - ship service footer colour

If your weblog has a designer template (ref, What variety of template accept I got), therefore the Template Designer > Advanced tab may accept an choice for setting the background color of the post-footer (depending on which template you lot are using).

If you lot travel a nighttime color (or accept a nighttime background too travel a low-cal color), this makes the post-footer await similar a line.

Disadvantage:  The "line" mightiness endure a chip thicker than you lot like.   And if your ship service is ready to display comments, or the weblog is ready to exhibit the author, labels etc nether the post, these items are shown correct within the footer line.

Add a line-command to your template

If you lot don't similar the other ii approaches, you lot tin alter your template to add together a horizontal line.  To exercise this:

1  Edit your template:

In Sept-2011-Blogger (ie the novel interface) instruct to Template > Edit HTML > Proceed
In pre-Sept-2011-Blogger (ie the onetime interface) instruct to Design > Edit HTML.

2  Download a total copy of your template, too pose it somewhere prophylactic (in instance things instruct wrong, too you lot involve to instruct dorsum to where you lot were).

3  Click on Expand Widget Templates.

4  Most templates accept 3 footer lines:  what is inwards each i depends on the template, too how you lot accept arranged the items inwards the Layout > Blog Posts editor.

Look at the template for code similar 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>

too add together the <hr /> command to which e'er i you lot want, for example

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

Advantage:  you tin easily house the divider business anywhere you lot desire it, relative to the other items inwards your post-footer.


Disadvantage:  you lot involve to modify your template, too this does accept some risks.  And it does travel the <hr /> tag which but about people (CSS purists) advise is non a expert idea.

Enhancements to the basic <hr /> command:

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

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

<hr style="color: red;" /> -  to alter the color
<hr style="width: 50%;" /> -  to arrive narrower

See w3c.schools <hr /> tag for to a greater extent than information. 

Add a edge to the CSS dominion that formats your posts

The cascading-style-sheet rules inwards your template command most aspects of how your weblog looks.   They tin endure a really powerful way to command how your weblog looks.

Quick option:

If you lot accept a designer template, therefore the quick way to brand this alter is to add a CSS dominion to your template.  The dominion code to add together is:

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

or this i if you lot desire the edge at the transcend of each post:

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

In-depth

The specific CSS dominion that controls how the "body" of your posts await is .post-body.   To brand changes to it:

1 Go to Design > Edit HTML

2 Download a total copy of your template, too pose it somewhere prophylactic (in instance things instruct wrong, too you lot involve to instruct dorsum to where you lot were).

3 Look for .post-body inwards the rules department of your template. It volition await something similar this, but  the exact lines too values may endure different:

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

 4  If you lot can abide by a .post-body rule, therefore add together this line, but earlier the } character.

border-bottom:1px dotted #666666;

5    If you lot cannot abide by a  .post-body disceptation inwards the rules department of your template, therefore you lot involve to add it.

Put it somewhere:

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

Before  ]]></b:skin>

But non inwards the middle of whatsoever other rules: await at how the residuum of that department of your template is set out for clues.

The disceptation to add together is something similar the following, though you lot may desire to endeavour out dissimilar 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 agency describe the business inwards dark - you lot may similar to travel a dissimilar colour, or travel the give-and-take "solid" instead of "dotted" to brand a firmer looking line.

As an alternative, you lot tin nation border-top:1px dotted #666666; - this puts a business at the transcend of the torso of each post, but underneath the title.

---

Related Articles:

What variety of template accept I got

Disadvantages of editing your blog's template.

Adding a novel CSS rules to your template

Centering the Post-title or Page-title

Putting HTML from elsewhere into your blog.

Tweet

Subscribe to receive free email updates: