Catetan

MEMBUAT BORDER DI BLOGGER 10

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

beresss.....

10 comments:

Prasetyo Nugroho

10 Jun 2009, 18.59.00
salam kenal mas karsono ya, mo tanya klo border-nya style emboss dengan color gradasi scriptnya gimana ya ?
karsono

23 Jun 2009, 09.02.00
Untuk membuat border emboss dengan gradasi warna, biasanya menggunakan border jenis ridge... kodenya.. <p style="border: 8px ridge #98bf21;padding:2px;"> border ridge</p>.. sedangkan untuk hasilnya coba dilihat postingan yang paling akhir...sudah aku tambahin
Anonim

10 Jul 2009, 10.57.00
:))hmmmmmm
ari

10 Des 2009, 21.02.00
Yo iii. makasih teman! Tutorialnya keren dan sangat membantu.
Makhasin

6 Okt 2010, 00.41.00
Makasi mas infonya bagus banget, saya cari kesana kemari dapatnya di sini
gesweet23

13 Okt 2010, 08.07.00
Salam KEnal ni
Ak baru belajar blog jadi isanya cuman ngopy2 gitu
Trima kasih
software download full

11 Jan 2011, 15.24.00
thanks boz untuk tutorialnya
Anak Brayan

30 Jan 2011, 14.50.00
makasih info nya bang..
membantu banget..
journalist blog design competition 2012

28 Feb 2012, 19.13.00
Wah bagus juga nih gan...

langsung coba...!
Kuliner Uniks

26 Okt 2012, 18.05.00
Bagus-bagus artikel nya Mas..., Ijin nyimak ya...!

Posting Komentar