Cara Membuat Border di Blogger (bagian 1)

Cara Membuat Border di Blogger (bagian 1)

Author : Published:
Border dalam Blog berfungsi memberikan Garis Tepi pada konten didalamnya, entah konten itu berupa teks atau gambar.
Cara Membuat Border di Blogger (bagian 1)
Selain membuat artikel menjadi menarik, adanya Border juga menimbulkan kesan bahwa konten di dalam Border tersebut adalah sesuatu yang penting. Artikel berikut membahas bagaimana cara membuat Border.

Secara umum, kode HTML untuk penulisan Border adalah :

<div style="border-width: 1px; border-style: solid; border-color: #444; background-color: #eaeaea; padding: 10px; text-align: left;"> Teks yang ingin ditampilkan</div>

Keterangan :
  • border-width: 1px; adalah kode untuk menyatakan tebal garis Border. Angka 1 bisa diganti dengan angka lain, semakin besar nilainya, semakin tebal pula garis Border-nya.
  • border-style: solid;  adalah kode untuk menyatakan type Border. Kata 'solid' bisa kita ganti dengan kata none, double, dotted, dashed, groove, ridge, inset atau outset.
  • border-color: #444;  adalah kode untuk menyatakan warna garis Border. Kode #444 bisa kita ganti dengan kode warna HTML yang lain.
  • background-color: #eaeaea;  adalah kode untuk menyatakan warna latar Border. Kode #eaeaea bisa diganti dengan kode warna HTML yang lain.
  • padding: 10px;  adalah kode yang menyatakan jarak antara teks dengan garis Border. Angka 10 bisa diganti dengan angka lain, semakin besar nilainya, semakin renggang jarak antara teks dengan garis Border.
  • text-align: left;  adalah kode untuk menyatakan ujung teks yang kita masukkan dalam Border akan rata di sebelah kiri. Kata 'left' bisa diganti dengan right, bila kita ingin ujung teks yang ditampilkan rata di sebelah kanan. Bila menginginkan teks berada di tengah-tengah Border, maka kata 'left' bisa diganti dengan center.
  • Kalimat 'Teks yang ingin ditampilkan' bisa kita ganti dengan kalimat lain, disesuaikan dengan keperluan.
Penulisan kode HTML untuk Border seperti contoh di atas, dapat kita singkat, seperti berikut ini :

<div style="border: 1px solid #444; background-color: #eaeaea; padding: 10px; text-align: left;">Teks yang ingin ditampilkan</div>

Hasil dari penulisan kode HTML di atas, akan kita dapatkan Border dengan isi teks seperti ini :

Teks yang ingin ditampilkan

Sampai disini, kita sudah bisa membuat contoh Border yang sederhana. Pada artikel berikutnya yaitu Cara Membuat Border di Blogger (bagian 2), kita akan coba menerapkan kode Border di atas pada halaman Blog, entah itu dalam Halaman Statis atau pada Postingan Blog.

Semoga artikel singkat ini ada manfaatnya.
0 Comments