Oke kawan - kawan, barusan
ane belajar merubah-rubah tampilan blog.
Buat ane sih biar gak membosankan, karena ane cepat bosan dan cukup capek klo harus ganti template lagi.
Nah, kali ini yang ane pelajari soal border ato garis tepi.
Mungkin para senior dah banyak yang tahu, jadi disini ane sekedar sharing aja. Yukk kita mulai sama-sama :
Ternyata boder itu ada beragam jenis yang bisa kita kreasikan agar tampilan blog lebih berbeda dari biasanya. border ini bisa kita gunakan untuk text atau pun image. berikut beberapa jenis border yang ane ketahui :
Contoh pemakaian pada text :
Kita perhatikan huruf yang berwarna merah.
Kode :
<span style="border: 5px solid rgb(240, 140, 0); padding: 8px;">solid</span>
Tampilan border :
solid
Kode :
<span style="border: 5px double rgb(240, 140, 0); padding: 8px;">double</span>
Tampilan border :
double
Kode :
<span style="border: 5px groove rgb(240, 140, 0); padding: 8px;">groove</span>
Tampilan border :
groove
Kode :
<span style="border: 5px dotted rgb(240, 140, 0); padding: 8px;">dotted</span>
Tampilan border :
dotted
Kode :
<span style="border: 5px dashed rgb(240, 140, 0); padding: 8px;">dashed</span>
Tampilan border :
dashed
Kode :
<span style="border: 5px inset rgb(240, 140, 0); padding: 8px;">inset</span>
Tampilan border :
inset
Kode :
<span style="border: 5px outset rgb(240, 140, 0); padding: 8px;">outset</span>
Tampilan border :
outset
Kode :
<span style="border: 5px ridge rgb(240, 140, 0); padding: 8px;">ridge</span>
Tampilan border :
ridge
Kode :
<span style="border: 5px hidden rgb(240, 140, 0); padding: 8px;">hidden</span>
Tampilan border :
hidden
Catatan : untuk merubah warna ada pada setinggan RGB atau #kode warna
Padding adalah jarak antara obyek dengan border
Jika kita ingin menambah border pada gambar postingan, kita cari kode ini :
.post img
Kemudian kita tambahkan kode border sehingga menjadi seperti ini :
.post img {border: 5px solid #F08C00;}
Nah, setelah kita coba, seperti biasa kita klik previewnya dulu klo dah mantabs baru kita save.
