Membuat garis horizontal di css

Cara Membuat Garis Vertikal Dengan HTML dan CSS

Pastinya sudah sering mendengar HTML dan CSS. Yap, mereka seperti pasangan yang tidak dapat dipisahkan. Untuk tutorial kali ini kita dapat menggunakan CSS sebagai alat bantu untuk membuat garisnya. Di sini saya contohkan menggunakan tag div dengan menambahkan attribute style untuk mengisi CSS-nya (CSS internal).

Contoh kodenya :

Contoh hasil :

Mungkin itu saja yang dapat saya bagikan kali ini. Semoga bermanfaat, terima kasih.

RahmanCyber.NET | Blogger - Hai Teman teman Blogger, kali ini saya akan berbagi nih cara membuat Garis semacam HR gitu, atau Tag HTML <HR>, tetapi ini menggunakan <DIV>.

{getToc} $title={Table of Contents}

Jadi sebenarnya dalam kasus ini adalah untuk menekankan sesuatu, dengan adanya Garis horizontal berwarna warni kan, bisa menarik perhatian orang untuk membaca apa yang kita tekankan tersebut...

Seperti ini nih contohnya.. yang diterapkan pada Blog teman saya ^_^

Nah.. udah agak paham ya yang dimaksud...

Jadi kita akan buat itu...

Tapi tenang nih, sobat tidak perlu kok bukak bukak Edit HTML, karena ini bisa langsung diterapkan di Widget / Gadget HTML di Blogger.

Bisa juga loh diterapkan di Postingan, tentunya kalian harus berada di Mode HTML ya.. bukan di mode penulisan..

Langsung aja.. berikut adalah Kode Style CSS Garis Horizontal Warna Warni nya :

<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, kalian bisa pastekan itu di bagian paling atas, atau satu tempat dengan kode penempatan..

Misalnya kalian mau meletakkannya di Postingan, berarti silahkan kalian letakkan di Paling atas.

Atau Jika kalian mau meletakkan di banyak tempat.. kalian hanya perlu buat Gadget atau Widget buat khusus nampung kode diatas yah..

Entar untuk penempatan kode <div> nya bisa di Postingan atau di Widget atau Gadget HTML lainnya tanpa harus memasang kode CSS Style diatas lagi.. 

Berikut Kode HTML <Div> Garis Horizontal Warna Warninya.. 

silahkan kalian letakkan dimanapun... yang ingin kalian tampilkan Garis Horizontal Warna Warni

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

Kalian bisa kode div yang tampilannya akan menjelma menjadi Garis Horizontal warna warni...

Berikut ini adalah contoh jika kalian mau meletakkan kode CSS dan HTML diatas dalam satu Widget / Gadget HTML

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

Jadi kalian bisa modifikasi modifikasi menyesuaikan dengan keinginan kalian, yang jelas satu kode div diatas adalah satu garis horizontal warna warni.

Kesimpulan

Kode diatas merupakan salah satu kode bagian dari Tutorial Blogger "Cara Memperindah Tampilan Blog dengan Garis Horizontal Warna Warni" kalian bisa eksplore beberapa materi yang kami buat lainnya di Blog ini..

Sekian Tutorial Blogger kali ini Visitor... moga dapat diambil manfaatnya... Langsung aja praktekkan biar enggak lupa.. Kalian bisa juga Bookmark halaman ini.. kalo sewaktu waktu butuh...

Bagaimana tampilan garis horizontal?

Bagaimana cara membuat garis horizontal dalam HTML?

Yang manakah garis horizontal?

Tag apa yang memiliki fungsi untuk menambahkan garis secara horizontal?