How to Create Elegant Colorful Horizontal Lines! on Blogger

Hi Blogger friends, this time I will share how to make a line like HR, or HTML <HR> Tag, but this is using <DIV>.

So actually in this case it is to emphasize something, with a colorful horizontal line right, it can attract people's attention to read what we emphasize it ...

Here's an example... which is applied to my friend's blog ^_^

Well.. I kinda understand what that means...

So we'll make that ...

But don't worry, you don't need to open Edit HTML, because this can be directly applied to HTML Widgets / Gadgets on Blogger.

You can also apply it in posts, of course you have to be in HTML Mode ... not in writing mode ... 

Immediately ... here is the Colorful Horizontal Line CSS Style Code:

<style>
.site-footer-colors i.teal {
    background-color: #009888;
}
.site-footer-colors i.red {
    background-color: #D53540;
}
.site-footer-colors i.green {
    background-color: #679047;
}
.site-footer-colors i.yellow {
    background-color: #EC8A22;
}
.site-footer-colors i {
    float: right;
    width: 25%;
    height: 8px;
}
* {
    margin: 0px;
    padding: 0px;
}
</style>

 

 

Yup, you can paste it at the very top, or one place with the placement code..

For example, if you want to put it in a post, then please put it at the top.

Or if you want to put it in many places ... you only need to create a Gadget or Widget to specifically accommodate the code above ...

The entry for the <div> code placement can be in Posts or in Widgets or other HTML Gadgets without having to install the CSS Style code above again..

 

 

 

Here's the HTML Code <Div> Color Horizontal Lines..

 

please put wherever ... you want to display Colorful Horizontal Lines

<div class="site-footer-colors"><i class="teal"></i><i class="red"></i><i class="green"></i><i class="yellow"></i></div>

 

You can code a div whose appearance will transform into a colorful Horizontal Line ...

 

 

The following is an example if you want to put the CSS and HTML code above in one HTML Widget / Gadget

 

 

 

<style>
.site-footer-colors i.teal {
    background-color: #009888;
}
.site-footer-colors i.red {
    background-color: #D53540;
}
.site-footer-colors i.green {
    background-color: #679047;
}
.site-footer-colors i.yellow {
    background-color: #EC8A22;
}
.site-footer-colors i {
    float: right;
    width: 25%;
    height: 8px;
}
* {
    margin: 0px;
    padding: 0px;
}
</style>
<div class="site-footer-colors"><i class="teal"></i><i class="red"></i><i class="green"></i><i class="yellow"></i></div>

 

So you can modify the modification according to your wishes, what is clear is that one div code above is a colorful horizontal line.

 

 

 

Conclusion

 

The code above is one of the codes part of the Blogger Tutorial "How to Beautify a Blog Display with Colorful Horizontal Lines" you can explore some of the other materials we made on this blog.. 

That's all this Blogger Tutorial, Visitor... hopefully it can be useful... Just practice it so you don't forget... You can also bookmark this page... if you need it at any time...