Make A Horizontal Line Delimiters/Vertical On Your Blog Using HTML

How to make a boundary on a blog using HTML?

Horizontal Limiting Lines or other terms are called horizontal lines, those lines are the first two categories, Horizontal and two Vertical lines, what is the difference between Horizontal and Vertical lines?

alber.id

The horizontal line is the line horizontally or transversely, e.g. you can see below:

---

As for the vertical line is perpendicular to the line that soars to the top, for example as below:

Sedangkan untuk garis Vertikal adalah garis yang tegak lurus menjulang ke atas, contohnya seperti dibawah ini

Manufacture of Horizontal or vertical lines is mostly in goal for the merapihkan display in any postings or to spruce up the look of the template on his blog and also wordpress.

We jump into how to make the boundary lines on the Blog using HTML

Make A Horizontal Line Or Horizontally

The trick is quite simple to create a Horizontal line or ordinary default you guys just pasting the code below in HTML mode:

<hr/>

results :

---

A Horizontal Line The Length Of The Half Of The Column Posts

<hr width="50%" />

results :

---

or

<hr align="left" width="200" />

results :

---

Make A Horizontal Line Colored

To create a colored line you must enter code cssnya MAS in advance on the template if not the result will be a plain black as the color of the lines of the above, the following code right above the cssnya MAS and input code ]]></b:skin>

/* Line Horizontal alber.id */

hr {border-bottom:dotted 1px #cccccc; border-top:0px;border-left:0px;border-right:0px;}

.alber { width: 100%; height:2px; overflow:hidden; position:relative; top:0px; left:0px ;}

.alber div{ height:2px; width:100%; float:left;}

.blue{background-color: #327EA3;}

Then input the code given below in the posting or in the template, if the postings make sure it is in HTML mode in advance:

<div class="alber">
<div class="blue"></div>

<div>

results :

Note : To change the color you have to add the css code colors in advance right under the css code that is already in the above example the red berries if you guys want to change into the color red used to add css code red. red {background-color: # Ff0000;} and for you guys just change the placement of the:

<div class="carakuy">

<div class="blue"></div>

<div>

To be

<div class="carakuy">

<div class="red"></div>

<div>

For HTML color codes can you guys look at a collection of HTML color codes

How To Make A Vertical Line

Input HTML code below, if you place the code below on the postings should be in HTML mode in advance do not Compose mode.

<div style="border: 1px #ff0000 solid; height: 250px; width: 0px;">

results : 

Note : If you want to change colors, replace the color code above seasoned red color with color codes that you guys want the select color here.

To thicken the line can you guys replace the nominal figures are given the color blue border, increasing the nominal number the thicker lines and if you want to add to the high line can you guys add a nominal height figures are given the color orange.

You can experiment with combining some of the attributes in order to display a line above the more elegant.

For more details please refer to understanding HTML Tag attribute table below

Align = to specify the position of the dividing line, the injunction left, right, or center.

Color = to specify the color of the line.

Width = width of the lines to determine which can also be pixsel (px) or percent (%) the width of the post page.

Height = to specify a line height

Border = to provide command line is thick

Horizontal and vertical lines of code above can be placed in the HTML mode, post in the template or Widget using JavaScript/HTML.

So from me about how to create lines of Demarcation on the Blog using HTML, this may be useful.

Pituluik Media

Blogger | Freelancer |Operations Manager | Marketing and Sales Manager | Lancer Evo 4 Community. Indonesian Bloggers Who Become Bloggers Because of Hobby. Feel free to connect with me on Social Media Instagram @alberandesko

Share this post