Border pada postingan blog

Posted by Bagus Swara On 4:57 PM

Border berguna untuk
memberikan bingkai pada tulisan agar terlihat
lebih terfokus dan menawan. Dengan pemberian
border juga akan membuat tulisan lebih mudah
untuk dipahami poin pentingnya. Akan tetapi,
karena fitur untuk membuat border belum
disediakan oleh blogger, maka kita harus
membuatnya sendiri dengan beberapa kode
HTML yang perlu ditambahkan.
Bagaimana cara membuat border dalam
postingan blog ini?

Pertama, masuk ke akun blogger kita.
Klik entri baru.
Saatmasuk dalam halaman untuk menulis
postingan blog, jangan masuk ke bagian
compose, tetapi masuk lah ke bagian edit HTML
untuk menuliskan kode HTML yang digunakan
untuk membuat border yang diinginkan beserta
tulisan yang akan muncul di dalam border yaitu:

» Solid Border

<div style="border: 2px #006400 solid; padding:
10px; background-color: #c3fdb8; text-align: left;">
TULIS SCRIPT/KODENYA DISINI </div>

» Ridge Border

<div style="border: 2px #006400 ridge; padding:
10px; background-color: #c3fdb8; text-align: left;">
TULIS SCRIPT/KODENYA DISINI </div>

» Groove Border

<div style="border: 2px #006400 groove;
padding: 10px; background-color: #c3fdb8; text-
align: left;"> TULIS SCRIPT/KODENYA DISINI </
div>

» Inset Border

<div style="border: 2px #006400 inset; padding:
10px; background-color: #c3fdb8; text-align: left;">
TULIS SCRIPT/KODENYA DISINI </div>

» Outset Border

<div style="border: 2px #006400 outset;
padding: 10px; background-color: #c3fdb8; text-
align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Double Border

<div style="border: 2px #006400 double;
padding: 10px; background-color: #EE82EE; text-
align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Dotted Border

<div style="border: 2px #006400 dotted;
padding: 10px; background-color: #B0C4DE; text-
align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Dashed Border

<div style="border: 2px #006400 dashed;
padding: 10px; background-color: #FFD700; text-
align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Border dengan scroll, lebar dan tinggi

<div style="border: 2px #006400 solid; padding:
10px; background-color: #00FFFF;overflow:
auto; height: 50px; width: 300px; text-align: left;">
TULIS SCRIPT/KODENYA DISINI </div>

Keterangan:

Kode HTML border: 1px #000000, menunjukan
warna dari border yang kita gunakan.
Kode HML padding: 10px, menunjukan jarak
bagian dalam dari border dengan body.
Kode HTML background-color: #CEF6CE,
menunjukan warna yang digunakan sebagai
background dalam border yang kita buat.
Kode HTML text-align: left, akan menampilkan
pemerataan tulisan dalam border yang dibuat,
apakah rata kanan (right), rata kanan kiri (justify),
atau rata tengah (center).
Kode HTML height: 50px, menunjukan tinggi dari
boder. Sedangkan kode HTML width: 300px,
menunjukan lebar border yang kita buat.