Sebenarnya membuat border dalam postingan blog merupakan hal yang gampang untuk dilakukan. Sobat sendiri setelah membaca artikel cara membuat border di postingan blog ini akan mengalami kemudahan membuat border atau garis. Karena kode html untuk membentuk border tidaklah rumit.
Dalam artikel ini akan membahas cara membuat border / garis tepi dalam postingan blog dengan singkat dan mudah. Agar para pemula tidak bingung dalam mempelajari harus disertai dengan cara mempraktekkannya. Tanpa mencoba untuk mempraktekkan cara membuat border ini mungkin tidak akan cepat bisa. Maka dari itu agar cepat bisa membuat border dengan mudah harus berani mencoba, mencoba dan mencoba dengan sungguh-sungguh.
Karena border memiliki bermacam-macam bentuk dan jenisnya. Maka dalam artikel ini akan menjelaskan macam-macam border atau garis tepi.
Berikut ini macam-macam style kode html yang harus diperhatikan dalam membuat border dalam postingan blog.
Macam-macam Bentuk Border
- Border Dashed : type border ini berbentuk garis putus-putus.
- Border Dotted : type border dotted ini berbentuk garis titik-titik.
- Border Double : bentuk dari type border double ini berupa garis ganda yang sejajar.
- Border Groove : bentuk dari type border groove ini berupa garis tiga dimensi berlekuk.
- Border Inset : bentuk dari type border inset ini berupa garis tiga dimensi bagian dalam.
- Border Outset : bentuk dari type border outset ini berupa garis tiga dimensi bagian luar.
- Border Ridge : type dari jenis border ini berbentuk garis bergerigi tiga dimensi.
- Border Solid : bentuk dari type border solid ini berupa garis penuh. Border solid ini sering sekali dipakai oleh setiap blogger.
- Border none : Bentuk border ini berupa garis pembatas yang tidak didefinisikan.
Contoh penulisan kode HTML dan tampilan bentuk dari border diatas.
<div style="border : 5px dashed #ff0000; padding: 6px;"> isi karakter disini. Ini contoh border dashed</div>
Tampilan bentuk border dashed . Keterangan : Border ini dengan tebal garis 5 pixel, warna garis merah (kode warna #ff0000) dan jarak antara karakter dengan garis (padding) 6 pixel.
<div style="border : 5px dotted #ff0000; padding: 6px;"> isi karakter disini. Ini contoh border dotted</div>
isi karakter disini. Ini contoh tampilan border dotted
<div style="border : 5px double #ff0000; padding: 6px;"> isi karakter disini. Ini contoh border double</div>
isi karakter disini. Ini contoh tampilan border double
<div style="border : 5px groove #ff0000; padding: 6px;"> isi karakter disini. Ini contoh border groove</div>
isi karakter disini. Ini contoh tampilan border groove
<div style="border : 5px inset #ff0000; padding: 6px;"> isi karakter disini. Ini contoh border inset</div>
isi karakter disini. Ini contoh border inset
<div style="border : 5px outset #ff0000; padding: 6px;"> isi karakter disini. Ini contoh border outset</div>
isi karakter disini. Ini contoh border outset
<div style="border : 5px ridge #ff0000; padding: 6px;"> isi karakter disini. Ini contoh border ridge</div>
isi karakter disini. Ini contoh border ridge
<div style="border : 5px solid #ff0000; padding: 6px;"> isi karakter disini. Ini contoh border solid</div>
isi karakter disini. Ini contoh border solid
<div style="border : 5px none #ff0000; padding: 6px;"> isi karakter disini. Ini contoh border none</div>
isi karakter disini. Ini contoh border none, karena border dengan format none maka border atau garis tepi tidak kelihatan.
Cara membuat border dalam postingan blog harus melalui HTML caranya seperti yang telah dijelaskan pada artikel-artikel sebelumnya.
Masuk Dashboard Blogger > Entri Baru > HTML (yang terletak disebelah pojok kiri atas sejajar dengan Compose).
Demikian semoga artikel ini dapat bermanfaat bagi sobat blogger.
No comments:
Post a Comment