Cara Membuat Border Di Dalam Postinganan BLOGGER

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 kita akan saling berbagi tentang bagaimana cara membuat border pada postingan blog;


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 kiri border, 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>


Semoga bermanfaat bagi kita semua, salam hangat.

Sumber : http://info-info-umum.blogspot.com/2012/01/membuat-border-pada-postingan-blog.html
http://abelavriyanno.blogspot.com/2012/06/cara-membuat-border-di-dalam.htm
Sumber: Abel Blog's: Cara Membuat Border Di Dalam Postinganan BLOGGER 

Artikel Terkait:

Read more at http://lenterablogger.blogspot.com/2012/05/cara-buat-artikel-terkait-scroll-bar.html#O8DI5OjM5JsWXsFK.99