Home » » Cara Membuat Border Di Blog Blogspot

Cara Membuat Border Di Blog Blogspot

Selamat datang di blog Aswani Comey, Berikut ini akan saya berikan informasi mengenai: Cara Membuat Border Di Blog Blogspot Semoga bermanfaat untuk kita semua.

Border biasa digunakan untuk menandai suatu kalimat yang dianggap penting di dalam postingan, atau dipakai sebagai pembatas antara satu sub dengan sub lain. Didalam membuat border, terutama untuk di blog, akan lebih mudah bila menggunakan kode CSS (Casscading Style Sheets)…Border sendiri ada beberapa type, diantaranya tipe solid dan dot… sebagai contoh coba lihat kode dibawah ini.


<div style="width:200px;height:100px;border:1px solid blue;">Teks anda dengan border solid</div>


Hasil dari kode diatas adalah seperti terlampir di bawah ini


Teks anda dengan border solid


Penjelasan :

Untuk border yang perlu diperhatikan adalah kode stylenya, dimana untuk kode diatas bisa diartikan sebagai border solid berwarna biru dengan ukuran 1 pixel …border:1px solid blue;….dan juga mempunyai tinggi 100 pixel dan lebar 200 pixel….width:200px; height:100px;...Selanjutnya kita akan melihat style border yang lain….


Style Border Dot



<div style="width:200px;height:100px;border:2px dotted blue;">Teks dengan border dot</div>


Hasilnya



Teks dengan border dot


Coba perhatikan perbedaanya, antara border solid dan border dot…. Yup cuman ganti nama aja dari solid menjadi dot… begitu juga untuk tipe lainnya tinggal liat perbedaanya sajah yach….


Style Border dash


<div style="width:200px;height:100px;border:2px dashed blue;">Teks dengan border dash</div>


Hasilnya


Teks dengan border dash


Outset Border


<div style="width:200px;height:100px;border:2px outset blue;">Teks dengan Outset Border</div>


hasilnya


Teks dengan border Outset


Inset Border


<div style="width:200px;height:100px;border:2px inset blue;">Teks dengan border Inset</div>


hasilnya


Teks dengan border Inset


Double border


<div style="width:200px;height:100px;border:2px double blue;padding:2px;">Teks dengan border double</div>


Hasilnya

Teks dengan border double


Multiple border



<div style="width:200px;height:100px;border-width:6px;border-color:blue;border-style:dotted dashed solid double;">Teks dengan burder yang multiple</div>


Hasilnya


Teks dengan burder yang multiple


Tambahan untuk pertanyaan di bawah border mengenai border emboss dengan gradasi warna... untuk hal tersebut bisa digunakan style border ridge contohnya dibawah

Border Ridge

Border Ridge kalau diperhatikan secara seksama hampir seperti bentuk Emboss (3d), kodenya...

<div style="BORDER: 5px ridge yellow; width:350px;">border ridge</div>


hasil dari kode diatas adalah


border ridge


Border ridge dengan gradasi warna yang beragam

Border ridge sendiri bila digabungkan dengan berbagai warna akan terbentuk seperti gradasi warna... kodenya...


<div style="BORDER: 5px ridge; border-color:#FF3300 #00FF00 #0000FF #FFFF00; width:350px;"></div>


Hasilnya

border ridge dengan gradasi warna

Semoga Cara Membuat Border Di blogspot ini bisa bermanfaat..thx to (karsono)


Terimakasih telah mengunjungi Blog Aswani Comey ini, dan membaca postingan mengenai : Cara Membuat Border Di Blog Blogspot semoga bermanfaat :)