Pages

Wednesday, May 9, 2012

How to Add a Horizontal Line (Rule) to Blogger Blogspot Post

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.
Mainly, it is used as a section divider.

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).

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.

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">
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:



Example #4

The code: 
<hr size="5" color="#999999">
The visual result:



Example #5

The code: 
<hr color="green" width="45%">
The visual result:



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

Example #6: Full width horizontal line

The code
An example of a dashed horizontal line
<div style="border-top: 2px dashed #DB1200; margin-top: 1em; padding-top: 1em;"> </div>
The first line of text after the horizontal line
The visual result:

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), dashed2px 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: dottedsoliddoublegroove 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 dotted horizontal line
The first line of text after the horizontal line

An example of a solid horizontal line
The first line of text after the horizontal line

An example of a double horizontal line
The first line of text after the horizontal line


An example of a groove horizontal line
The first line of text after the horizontal line


An example of a ridge horizontal line
The first line of text after the 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

The code
An example of a dashed horizontal line
<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
The visual result for the horizontal lines from Example #6 with the width attribute added and color changed to #0B5394:

An example of a dashed horizontal line
The first line of text after the horizontal line 

An example of a dotted horizontal line
The first line of text after the horizontal line

An example of a solid horizontal line
The first line of text after the horizontal line

An example of a double horizontal line
The first line of text after the horizontal line

An example of a groove horizontal line
The first line of text after the horizontal line


An example of a ridge horizontal line
The first line of text after the 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 line
<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
The visual result for the centered horizontal lines from Example #7 with color changed to #38761D:

An example of a dashed horizontal line
The first line of text after the horizontal line 

An example of a dotted horizontal line
The first line of text after the horizontal line

An example of a solid horizontal line
The first line of text after the horizontal line

An example of a double horizontal line
The first line of text after the horizontal line

An example of a groove horizontal line
The first line of text after the horizontal line


An example of a ridge horizontal line
The first line of text after the horizontal line




The code for right aligned horizontal line
An example of a dashed horizontal line
<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
The visual result for the right aligned horizontal lines from Example #7 with color changed to #C27BA0:

An example of a dashed horizontal line
The first line of text after the horizontal line 

An example of a dotted horizontal line
The first line of text after the horizontal line

An example of a solid horizontal line
The first line of text after the horizontal line

An example of a double horizontal line
The first line of text after the horizontal line

An example of a groove horizontal line
The first line of text after the horizontal line


An example of a ridge horizontal line
The first line of text after the horizontal line

62 comments:

  1. This is a marvelous and unexploited information that you have shared in this posting. I read the whole information and also apply it. It gives my blog impressive looks. Thanks for the share. Brand Logo Design

    ReplyDelete
  2. This is very elegant blog with great & significant information.web design orange media

    ReplyDelete
  3. This constantly amazes me just how blog owners such as your self can find the time as well as the dedication to keep on crafting superb blog posts. Your website is good and one of my personal must read weblogs. I just had to thank you.
    Professional Web Design Company

    ReplyDelete
  4. This is also a very good post which I really enjoyed reading.Contact us for more details.

    ReplyDelete
  5. This is very elegant blog with great & significant information.
    San Francisco website Design Company

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Infotainment Technology is new web designing Company bashed from India to providing quality of visual lens web designing, logo designing, Graphics designing with free hosting installation.The Company providing free seo service for new all web designing client. Check his special offer in web designing page.
    asiskumar

    ReplyDelete
  8. Hi,
    Palm Beach Web studio is dedicated to providing quality webpage designs, website development, and affordable web hosting for any size business. Please click more Web Design Company

    ReplyDelete
  9. I really would like to praise you for writing such a fabulous article Thanks for your great blog.Website development san Francisco

    ReplyDelete
  10. Site is ordinarily considered as you online presence and there are numerous expert organizations offering their master web related administrations. There are numerous sorts of web guides accessible, some of them are less expensive contrasted with the others and some of them are discovered extravagant. The individuals who are extravagant, are exceptionally web-designing rumored and solid web specialists and they offer complete web related administrations.

    ReplyDelete
  11. Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!!.Contact us for more

    ReplyDelete
  12. Pretty remarkable post. I simply came across your blog and desired to say that I have really enjoyed searching your blog posts.Web Design Miami

    ReplyDelete

  13. Share or Provide your details, styles, noticeable, 3d styles, performs of art, pictures, etc., generate income, and get used globally. Sign-up via e-mail or your community press consideration here: http://www.ehuub.com/login/ by selecting classification "GRAPHICS, DESIGN, AND MULTIMEDIA", thank you!

    ReplyDelete
  14. Primeau Productions is your current full-service online video media production company, throughout company intended for over 30 years. Primeau Productions owes its success immediately towards the results The idea achieves due to the clients. i are a results-oriented company, As established via MY PERSONAL published listing of long-term, repeat customers.keynote-speaker-demo-video-production

    ReplyDelete
  15. Nice share! Thanks a lot for such a lovely blog posting this time around as well.Web designer san Francisco

    ReplyDelete
  16. Thank you so much for giving us such kind of handy content which will be most useful to me as well as others.Web Design Palm beach

    ReplyDelete
  17. Hi,
    Palm Beach Web studio is dedicated to providing quality webpage designs, website development, and affordable web hosting for any size business. More Web Design Palm beach

    ReplyDelete
  18. In order to best right Web Design and features for your web site it's vital to Hire right company once analyzing its performance over the years. If the organisation has completely different promotional methodologies for the clients then it's possible that the web site are going to be raised in a very vital manner within the digital market.

    ReplyDelete
  19. Hi,
    Get Excellent, High Quality and Affordable Website Designs from Orange Media Studio :- orange media

    ReplyDelete
  20. This post is really nice and informative. The explanation given is really comprehensive and informative. I am feeling happy to comment on this post.Web Development Sanfrancisco

    ReplyDelete
  21. Thanks for sharing such a informative post with us.
    Web Design Delray Beach

    ReplyDelete
  22. You can introduce completely different incentives further as discount coupons to grab the interest of consumers. In robust on-line competition, certify that your product meet the demand of the shoppers whereas maintaining the standard, for more information click here social media marketing miami.

    ReplyDelete
  23. very useful information to us, thank's for share your important data.

    www.billpayday.com

    ReplyDelete
  24. Great tip. though I already knew about it, but it was great revision.Thanks a lot.

    ReplyDelete
  25. Easily, the article is actually the best topic on this registry related issue. I fit in with your conclusions and will eagerly look forward to your next updates. Just saying thanks will not just be sufficient, for the fantasti c lucidity in your writing. I will instantly grab your rss feed to stay informed of any updates. Webdesign Christian

    ReplyDelete
  26. Waow great article I'was looking for this and i was searching on google about two days. check my blog http://waseempk.blogspot.com/

    ReplyDelete
  27. Waow great article I'was looking for this and i was searching on google about two days. check my blog My blog

    ReplyDelete
  28. Jain Technosoft is a one-stop solution for designing any kind of website from basic business websites to e-commerce websites, real estate websites and travel portal websites.
    Web Design Company|Graphic Design Company

    ReplyDelete
  29. I read your post carefully. You have published comprehensive and valuable information about web designing. thanks for sharing it.

    ReplyDelete
  30. Easily, the article is actually the best topic on this registry related issue. I fit in with your conclusions and will eagerly look forward to your next updates. Just saying thanks will not just be sufficient, for the fantasti c lucidity in your writing. Airtel Free Internet

    Tricks
    Also check freecharge coupon code

    ReplyDelete
  31. Internet reaches out to a wide audience and is used to publish personal and professional information with some engaging user experience. You Can see more in : web developer

    ReplyDelete
  32. Web Development process of a website is a series of steps which is generally completed via firms which develops websites professionally. Please visit us: web developer

    ReplyDelete
  33. Really u r shared great tips with us

    ReplyDelete
  34. Graphic design jobs online is a convenient way to find jobs and in fact it simplifies job hunting process.

    ReplyDelete
  35. Your article is good and blog look nice thanks for share with us.
    Android Mobile Software for Download

    ReplyDelete
  36. We design innovative ecommerce website, dynamic website, flash website etc. Our design and develop website are according to SEO and give much traffic than your competitor.
    website designing companyy bangalore | wesite development company bangalore

    ReplyDelete
  37. Information for the blogging post which is really useful and getting to know this details about it. Thank you very much.

    Best web site developer | professional seo company in Dindigul

    ReplyDelete
  38. these line codes are very Much helpful.but by applying this lines,my H1 and H2 tags will be effected or not,please check it out http://softdews.blogspot.com

    ReplyDelete
  39. Nice informative post, thanks for sharing....!
    web designing bangalore

    ReplyDelete
  40. Thanks for the sharing of such information. we will pass it on to our readers. This is a great reading. Thanking you.

    Web Design Company in Delhi | Website Designing Company in Delhi

    ReplyDelete
  41. very nice blogs!!! i have to learning for lot of information for this sites...Sharing for wonderful information about the web design and web development.Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.Bangalore Website Design Company | Website Development Bangalore

    ReplyDelete
  42. how can i make like " / " this line?

    ReplyDelete
  43. I was looking for the same, searched Google and Found you. Actually i have to make some change in My website as well.

    ReplyDelete
  44. I feel really nice reading these articles I mean there are writers that can write good material.web design tips

    ReplyDelete
  45. Klicktwice - Responsive Webdesign and Web Development Services in Palm Beach Florida. We are specializing in custom web designs and web development administrationsResponsive WebDesign Palm Beach

    ReplyDelete
  46. Great Post ! We design innovative ecommerce website, dynamic website, flash website etc. Our design and develop website are according to SEO and give much traffic than your competitor.
    Website development company in Nashik

    ReplyDelete
  47. I’m new to this web designing, whether this is code is similar or it varies to other platform?

    ReplyDelete
  48. I read your article. Very Nice. This is really great and informative post. Thanks for sharing.
    Wordpress Web Development Company In Noida

    ReplyDelete
  49. Great Post ! We design innovative ecommerce website, dynamic website, flash website etc. Our design and develop website are according to SEO and give much traffic than your competitor.

    ReplyDelete
  50. Very Good Information... Thanks to share this valuable post.
    Kids Party Planner Delhi NCR

    ReplyDelete