Cara membuat border kotak area tulisan dalam posting

Lihat tulisan dalam kotak area di bawah ini:

Cara membuat border kotak area tulisan dalam posting

 Terkadang dalam posting kita memerlukan kotak seperti di atas untuk memperjelas atau memfokuskan pembaca pada suatu teks yang kita buat. Pernahkah terlintas dalam benak anda untuk membuatnya? Bagaimana cara membuat teks berkotak seperti area di atas ikuti cara berikut:

1. Buka account Blogger anda

2. Buat entri baru, dan pilih Edit HTML.

3. Masukan kode berikut :

<div style=”border-bottom: #6c7a7d 1px inset; border-left: #6c7a7d 1px inset; border-right: #6c7a7d 1px inset; border-top: #6c7a7d 1px inset; margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;”>
<span style=”color: red;”>TEXT ANDA</span></div>

Lalu klik Compose,

Jika langkah anda benar maka hasilnya akan seperti ini:

TEXT ANDA

Untuk mengedit sesuka anda, keterangannya sebagai berikut :

  1. border-right = garis pinggir kotak sebelah kanan.
  2. border-left = garis pinggir kotak sebelah kiri.
  3. border-top = garis pinggir kotak sebelah atas.
  4. border-bottom = garis pinggir kotak sebelah bawah.
  5. #6c7a7d; #ff0000 = kode warna, rubah sesuai keinginan. Untuk kode warnanya lihat di sini.
  6. 1px inset = ketebalan garis pinggir kotak, rubah sesuai keinginan.
  7. padding-right = jarak tulisan dengan garis pinggir kotak sebelah kanan.
  8. padding-left = jarak tulisan dengan garis pinggir kotak sebelah kiri.
  9. margin-right = jarak kotak dengan pinggir posting sebelah kanan.
  10. margin-left = jarak kotak dengan pinggir posting sebelah kiri.
  11. 20px; 30px; 70px = satuan jarak, rubah sesuai keinginan.

Selamat mencoba dan semoga bermanfaat.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s