Another option that the latest visual Blogger's post editor is lacking is the "Insert horizontal line" option (this option is available in the Google Sites's visual editor of the page content).
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 write an appropriate code through the HTML editor. Below are some HTML code examples for horizontal line.
Note #1: The visual result may slightly differ in different browsers (the page was tested in IE9, Mozilla Firefox 12.0, Chrome, Opera 11.62 and Safari 5.1.5 installed on Windows Vista SP2).
Note #1: The visual result may slightly differ in different browsers (the page was tested in IE9, Mozilla Firefox 12.0, Chrome, Opera 11.62 and Safari 5.1.5 installed on Windows Vista SP2).
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
Note #2: The tag <hr> is the same as <hr align="center" size="2" width="100%"> and in most browsers the visual result is a horizontal line with shade. For larger sizes, the horizontal line looks more like a rectangular frame, but once you add the color attribute it turns to a fully colored line (in Firefox with rounded corners - visible when the size is larger).
Here are some examples:
Example #1
The visual result:
Example #2
The visual result:
Example #3
The visual result:
Example #4
The visual result:
Example #5
The visual result:
Example #6: Full width horizontal line
An example of a dashed horizontal line
The first line of text after the horizontal line
Note #3: The above code adds a full width, colored (#DB1200), dashed, 2px thick horizontal line. If you use this code for adding horizontal line, or any from the following examples, and you want to switch from the HTML to the visual Blogger Blogspot post editor right after entering the code, make shore that , before that you add some text instead of the line "The first line of text after the horizontal line" before switching. I don't know why, but when I inserted only "<div style="border-top: 2px dashed #DB1200; margin-top: 1em; padding-top: 1em;"> </div>" and switched to the visual editor, the above horizontal line start appearing every time I hit the enter button.
Note #4: The dashed attribute, also known as a CSS border-style property, has the following alternatives: dotted, solid, double, groove and ridge. Here are the results of the above code after changing only the dashed attribute (for the last three attributes the line thickness is set to 6px):
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.
Note #2: The tag <hr> is the same as <hr align="center" size="2" width="100%"> and in most browsers the visual result is a horizontal line with shade. For larger sizes, the horizontal line looks more like a rectangular frame, but once you add the color attribute it turns to a fully colored line (in Firefox with rounded corners - visible when the size is larger).
Here are some examples:
Example #1
The code:
<hr align="right" color="orange" size="3" width="500">
Example #2
The code:
<hr align="center" color="#ff1100" size="5" width="60%">
Example #3
The code:
<hr size="5">
Example #4
The code:
<hr size="5" color="#999999">
Example #5
The code:
<hr color="green" width="45%">
Adding Horizontal Line with the HTML <div> Tag
The horizontal lines can be styled by adding appropriate CSS properties, but the ones I've tested did not produce the result I've expected in all of the five browsers (IE9, Mozilla Firefox 12.0, Chrome, Opera 11.62 and Safari 5.1.5), especially when I wanted to insert dotted or dashed horizontal line. If you still want to try this type of styling check these links: link 5, link 6 or link 7.
1. Adding left aligned horizontal line
The code
An example of a dashed horizontal lineThe visual result:
<div style="border-top: 2px dashed #DB1200; margin-top: 1em; padding-top: 1em;"> </div>
The first line of text after the horizontal line
An example of a dashed horizontal line
Note #3: The above code adds a full width, colored (#DB1200), dashed, 2px thick horizontal line. If you use this code for adding horizontal line, or any from the following examples, and you want to switch from the HTML to the visual Blogger Blogspot post editor right after entering the code, make shore that , before that you add some text instead of the line "The first line of text after the horizontal line" before switching. I don't know why, but when I inserted only "<div style="border-top: 2px dashed #DB1200; margin-top: 1em; padding-top: 1em;"> </div>" and switched to the visual editor, the above horizontal line start appearing every time I hit the enter button.
Note #4: The dashed attribute, also known as a CSS border-style property, has the following alternatives: dotted, solid, double, groove and ridge. Here are the results of the above code after changing only the dashed attribute (for the last three attributes the line thickness is set to 6px):
An example of a solid horizontal line
An example of a double horizontal line
An example of a groove horizontal line
An example of a ridge horizontal line
Example #7: Horizontal line with predefined width
A left aligned horizontal line with width smaller than the text width can be inserted similarly. You only need to add the width attribute (pixels or percentage) to the code in Example #6, that is
An example of a dashed horizontal line
The first line of text after the horizontal line
An example of a dotted horizontal lineA left aligned horizontal line with width smaller than the text width can be inserted similarly. You only need to add the width attribute (pixels or percentage) to the code in Example #6, that is
The code
An example of a dashed horizontal lineThe visual result for the horizontal lines from Example #6 with the width attribute added and color changed to #0B5394:
<div style="border-top: 2px dashed #0B5394; margin-top: 1em; padding-top: 1em; width: 400px"> </div>
The first line of text after the horizontal line
An example of a dashed horizontal line
An example of a solid horizontal line
An example of a double horizontal line
An example of a groove horizontal line
An example of a ridge horizontal line
2. Adding centered or right aligned horizontal line
To add a horizontal line which is centered or right aligned (this makes sense if the line width is smaller than the text width) with the <div> tag, I got the desired result by using another <div> tag "around" the <div> tag in the code from the Example #7 as follows:
The code for centered horizontal line
An example of a dashed horizontal lineThe visual result for the centered horizontal lines from Example #7 with color changed to #38761D:
<div align="center">
<div style="border-top: 2px dashed #38761D; margin-top: 1em; padding-top: 1em; width: 400px"> </div>
</div>
The first line of text after the horizontal line
An example of a dashed horizontal line
An example of a solid horizontal line
An example of a double horizontal line
An example of a groove horizontal line
An example of a ridge horizontal line
The code for right aligned horizontal line
An example of a dashed horizontal lineThe visual result for the right aligned horizontal lines from Example #7 with color changed to #C27BA0:
<div align="center">
<div style="border-top: 2px dashed #C27BA0; margin-top: 1em; padding-top: 1em; width: 400px"> </div>
</div>
The first line of text after the horizontal line
An example of a dashed horizontal line
An example of a solid horizontal line
An example of a double horizontal line
An example of a groove horizontal line
An example of a ridge horizontal line
