Cara membuat Border secara Manual diblog

Cara membuat Border secara Manual diblog Didalam membuat postingan, terkadang kita menuliskan beberapa kalimat maupun script kode tertentu yang penting, dan ingin kalimat tersebut dapat terbaca dengan jelas oleh pengunjung. Selain dengan memanfaatkan fasilitas yang sudah tersedia, seperti penebalan kalimat, underline, merubah warna kalimat, kita dapat juga memodifikasi kalimat penting tersebut agar dapat terlihat jelas, yaitu dengan menggunakan border. Selain berfungsi sebagai pembatas elemen, dengan menggunakan border, hasil postingan kita juga akan nampak lebih indah / bervariasi. Berikut ini adalah cara untuk membuatnya

SOLID BORDER :
<div style="border: 3px #000099 solid; padding: 5px; background-color: #00FFCC; text-align: left"> MASUKKAN TEKS/SCRIPT KODE DISINI </div>

Hasil yang terlihat akan seperti ini :

MASUKKAN TEKS/SCRIPT KODE DISINI

Keterangan :

• border: 3px #000099 solid; menunjukkan bahwa garis tepi border yang kita gunakan adalah sebesar 3px, dengan jenis border solid dan menggunakan warna #000099, untuk garis tepi ( 3px ), bisa kita rubah sesuai selera, ingin dipertebal maupun dibuat lebih tipis, tinggal mengganti angkanya. Sedangkan untuk warna ( #000099 ), kita dapat merubahnya sesuai keinginan kita, tinggal mencari kode warna yang kita inginkan.
• padding; 5px; menunjukkan bahwa jarak antara tulisan dengan tepian garis border adalah sebesar ( 5px ), dapat dirubah sesuai keinginan kita, dengan penjelasan semakin besar angkanya, jarak antara tulisan dengan garis tepi juga semakin renggang.
• background-color:#00FFCC; menunjukkan bahwa background border berwarna ( #00FFCC ), dapat dirubah sesuai keinginan kita.
• text-align:left" menegaskan bahwa perataan kalimat ada di sebelah kiriborder, untuk merubahnya agar berada di tengah, ganti dengan center, jika ingin di sebelah kanan, ganti dengan right.

DASH BORDER :

<div style="border: 3px #000099 dashed; padding: 5px; background-color: #00FFCC; text-align: right;"> MASUKKAN TEKS/SCRIPT KODE DISINI </div>

DOTTED BORDER :

<div style="border: 3px #000099 dotted; padding: 5px; background-color: #00FFCC; text-align: center;"> MASUKKAN TEKS/SCRIPT KODE DISINI </div>

OUTSET BORDER :

<div style="border: 3px #000099 outset; padding: 5px; background-color: #00FFCC; text-align: center;"> MASUKKAN TEKS/SCRIPT KODE DISINI </div>

INSET BORDER :

<div style="border: 3px #000099 inset; padding: 5px; background-color: #00FFCC; text-align: left;"> MASUKKAN TEKS/SCRIPT KODE DISINI </div>

DOUBLE BORDER :

<div style="border: 3px #000099 double; padding: 5px; background-color: #00FFCC; text-align: center;"> MASUKKAN TEKS/SCRIPT KODE DISINI </div>

RIDGE BORDER :

<div style="border: 3px #000099 ridge; padding: 5px; background-color: #00FFCC; text-align: center;"> MASUKKAN TEKS/SCRIPT KODE DISINI </div>

GROOVE BORDER :

<div style="border: 4px #000099 groove; padding: 5px; background-color: #00FFCC; text-align: left;"> MASUKKAN TEKS/SCRIPT KODE DISINI </div>

SCROLL BORDER :

<div style="overflow:auto;width:140px;height:100px;padding:10px;background-color: #00FFCC;border:1px solid #000099"> MASUKKAN TEKS/SCRIPT KODE DISINI </div>

Share 'Cara membuat Border secara Manual diblog' On ...

Title: Cara membuat Border secara Manual diblog
Posted by:Anonymous
Published :2012-12-11T08:50:00+07:00
Rating: 5
Reviewer: 100000000 Reviews
Terimakasih banyak karena sobat telah membaca artikel Cara membuat Border secara Manual diblog. Sobat bisa bookmark halaman ini dengan URL http://cyberr-kediri.blogspot.com/2012/12/cara-membuat-border-secara-manual-diblog.html?m=0. Jika ingin memposting ulang artikel ini harap untuk mencantumkan link sumber.