How to Add a Simple Horizontal Line to Blogger Blogspot Post

Add a Horizontal Line Blogspot Post 

An Option that the latest visual Blogger's post editor is lacking is the "Insert horizontal line" option

A horizontal line (or, horizontal rule) is a line which can be

• with different length (or width),
• aligned on the left, at the center, or on the right,
• with different thickens (or size), 
• with different color, 
• solid, dashed, dotted etc.

To add a horizontal line in a Blogger Blogspot post, you have to copy and past code through the HTML editor:

(When writing a post there is two alternatives at the left side of the post editor menu : Compose and HTML)

 Below are some HTML code examples for horizontal line.

Adding Horizontal Line with the HTML <hr> Tag

1. The Basic <hr> Tag

The code:

<hr>

The visual result:

---

2. Additional Attributes for the <hr> Tag

The code for a horizontal line with added attributes is 

<hr align="center" color="green" size="2" width="80%">

• The align attribute should be added to the code if the width of the horizontal line is less than the text width.Values for this attribute are: left, center or right.
• The width attribute should be added to the code if you want a horizontal line with a width is less than the text width. Values for this attribute can be expressed in pixels (e.g. 200px - you can skip the "px" after the number) or in percent (e.g. 50%).
• The color attribute should be added to the code if you want a colored horizontal line. Values for this attribute can be express as a color name (e.g. red green, blue, orange - for additional HTML color names check any of these links: link 1, link 2, link 3, link 4) or the color's hex code (we recommend the Multitoolbox's Color picker and this simple "hex to rgb" and "rgb to hex" code converter)
• The size attribute should be added to the code if you want a thicker horizontal line. Values for this attribute are 1, 2, 3, etc.

Example 1

The code: 

<hr align="right" color="orange" size="3" width="500">

The visual result:

---

Example 2

The code: 

<hr align="center" color="#ff1100" size="5" width="60%">

The visual result:

---

Example 3

The code: 

<hr size="5">

The visual result is :

---

Example 4

The code: 

<hr size="5" color="#999999">

The visual result:

---

Example 5

The code: 

<hr color="green" width="45%">

The visual result:

---