Border pada postingan blog

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;">
BlogBukanBiasa </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;">BlogBukanBiasa </
div>

» Inset Border

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

» Outset Border

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

» Double Border

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

» Dotted Border

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

» Dashed Border

<div style="border: 2px #006400 dashed;
padding: 10px; background-color: #FFD700; text-
align: left;"> BlogBukanBiasa </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;">

BlogBukanBiasa </div>

Keterangan:

1. Kode HTML border: 1px #000000, menunjukan
   warna dari border yang kita gunakan.
   
2. Kode HML padding: 10px, menunjukan jarak
   bagian dalam dari border dengan body.
   
3. Kode HTML background-color: #CEF6CE,
   menunjukan warna yang digunakan sebagai
   background dalam border yang kita buat.
   
4. 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).
   
5. Kode HTML height: 50px, menunjukan tinggi dari
   boder. Sedangkan kode HTML width: 300px,
   menunjukan lebar border yang kita buat.