How To Draw A Horizontal Line In Blogger Template Using A Simple Tag

Blogger is one of the best free CMS platform used by more than 250 million active users . Some top websites like twitter are also using blogger . Anybody who knows HTML can design quality templates in Blogger . But , most people do not have enough HTML knowledge to conquer Blogger Template editing . As , Blogger's default templates are boring and not so attractive , many people are using templates shared by other people . It reduces the uniqueness of your blog . Everybody in this world wants a change . If they find you using templates which are very popular already , they will not care about your content . So , if You do not know HTML and you are forced to take the templates of other , then we are going to share one easy trick to stand out your template from the original one . Here , we are going to explain how to draw a horizontal line on the Blogger template using a simple tag . Moreover , this can make your template more beautiful as this tag can be highly customized .

What Is The <hr/> Tag 

<hr/> tag is used to indicate the division of elements in your page . The full form of hr is Horizontal Ruler . From the word itself you can get the meaning which is a line drawn with a ruler/scale horizontally . This tag is not so beautiful when applied to the template without any styling . So , we will also discuss the ways of styling this tag.

How To Use This Tag

Copy <hr/> And paste it anywhere on the body or head of any template and you can see a horizontal line on your webpage . THis tag applied without styles looks ugly so lets style this .

Increase Width  

<hr style = "width:100%;" /> 

Increasing the width also adds up to the beauty of your blog . Change the width according to your wish and apply it on your blog to get a change from the old same boring template .

Increase Height

<hr style = "height:2em;" />

Height here is measured as 2em . To see a live demo of this , scroll down to our footer and chack the amazing widget inside the two <hr/> lines

Change Background Color

<hr style = "background-color:#000;" />

Background color makes the horizontal line a lot better . This is one of the best customization to the <hr/> tag as changing the color to a brighter one grabs the attention of the people .

All In One : Width , Height And Background Color

<hr style = "height:2em;width:100%;background-color:#000;" />

Using an all In One Tag makes it better than using any one of the tags or wasting so much time on mixing the three tags . So , this is also another customization which takes the attention of the visitors .

Thats All and in the next week we will be sharing a tutorial on how to add a hover color and border for the Horizontal line . Thank You for your precious time ! Good Luck being unique in creating templates !