Published: 5/22/2018 03:22:00 AM
Pada artikel sebelumnya, Cara Membuat Border di Blogger (bagian 2), kita sama-sama telah belajar cara membuat postingan berisi sebuah Border sederhana.
Sekarang kita akan belajar membuat aneka macam Border dengan cara mengubah kode HTML seperti tebal garis (border-width) dan type garis (border-style). Sebagai patokan, kita gunakan kode HTML Border berikut ini :
Sekarang kita coba ganti kode border-width: 1px; secara berturut-turut dengan border-width: 3px; border-width: 5px; dan border-width: 10px; maka berikut ini bentuk penulisan kode HTML dan hasilnya :
Contoh Kode HTML Border dengan Ketebalan Garis 3px.
Hasilnya :
Contoh Kode HTML Border dengan Ketebalan Garis 5px.
Hasilnya :
Contoh Kode HTML Border dengan Ketebalan Garis 10px.
Hasilnya :
Sekarang kita akan coba mengganti kode border-style: solid; dengan kode border-style: none; border-style: double; border-style: groove; border-style: ridge; border-style: dotted; border-style: dashed; border-style: inset; dan border-style: outset;
Berikut contoh penulisan kode HTML disertai contoh Border yang dihasilkan :
Contoh Kode HTML Border type : none.
Hasilnya :
Contoh Kode HTML Border type : double.
Hasilnya :
Contoh Kode HTML Border type : groove.
Hasilnya :
Contoh Kode HTML Border type : ridge.
Hasilnya :
Contoh Kode HTML Border type : dotted.
Hasilnya :
Contoh Kode HTML Border type : dashed.
Hasilnya :
Contoh Kode HTML Border type : inset.
Hasilnya :
Contoh Kode HTML Border type : outset.
Hasilnya :
Kita juga bisa mengkombinasikan dua, tiga sampai empat type Border sekaligus, sehingga hasilnya lebih menarik. Untuk masalah ini akan kita pelajari bersama di artikel berikutnya : Cara Membuat Border di Blogger (bagian 4).
Semoga artikel singkat ini bisa bermanfaat.
<div style="border-width: 1px; border-style: solid; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Sekarang kita coba ganti kode border-width: 1px; secara berturut-turut dengan border-width: 3px; border-width: 5px; dan border-width: 10px; maka berikut ini bentuk penulisan kode HTML dan hasilnya :
Contoh Kode HTML Border dengan Ketebalan Garis 3px.
<div style="border-width: 3px; border-style: solid; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Contoh Kode HTML Border dengan Ketebalan Garis 5px.
<div style="border-width: 5px; border-style: solid; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Contoh Kode HTML Border dengan Ketebalan Garis 10px.
<div style="border-width: 10px; border-style: solid; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Sekarang kita akan coba mengganti kode border-style: solid; dengan kode border-style: none; border-style: double; border-style: groove; border-style: ridge; border-style: dotted; border-style: dashed; border-style: inset; dan border-style: outset;
Berikut contoh penulisan kode HTML disertai contoh Border yang dihasilkan :
Contoh Kode HTML Border type : none.
<div style="border-width: 1px; border-style: none; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Contoh Kode HTML Border type : double.
<div style="border-width: 5px; border-style: double; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Contoh Kode HTML Border type : groove.
<div style="border-width: 5px; border-style: groove; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Contoh Kode HTML Border type : ridge.
<div style="border-width: 5px; border-style: ridge; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Contoh Kode HTML Border type : dotted.
<div style="border-width: 5px; border-style: dotted; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Contoh Kode HTML Border type : dashed.
<div style="border-width: 5px; border-style: dashed; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Contoh Kode HTML Border type : inset.
<div style="border-width: 5px; border-style: inset; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Contoh Kode HTML Border type : outset.
<div style="border-width: 5px; border-style: outset; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>
Hasilnya :
Teks yang ingin ditampilkan
Kita juga bisa mengkombinasikan dua, tiga sampai empat type Border sekaligus, sehingga hasilnya lebih menarik. Untuk masalah ini akan kita pelajari bersama di artikel berikutnya : Cara Membuat Border di Blogger (bagian 4).
Semoga artikel singkat ini bisa bermanfaat.
0 Comments