Membuat Kotak Cantik Posting Blog [border beda]

Untuk membuat border pada postingan maka dalam penulisan kodenya harus dalam mode HTML, tanpa mode tersebut, maka akan dianggap sebagai teks biasa. Contoh border pertama kode html sebagai berikut :

<div style=”border: 1px #c8c785 solid; background-color: #fdfccf; width: 200px; padding: 10px; text-align: left;”>KATA POSTING DI SINI</div>

Hasilnya script di atas menjadi seperti di bawah ini :

KATA POSTING DI SINI

Contoh lagi dengan panjang, warna dan background border posting berbeda seperti di bawah ini kode html-nya. Perubahan pada kata yang dicetak tebal

<div style=”border: 1px #a0ca9e dotted; background-color: #e5fce4; width: 400px; padding: 5px; text-align: right;”>Contoh border kedua</div>

Contoh border kedua

Penjelasan sedikit supaya paham struktur kode html tersebut bagi yang lagi mulai mengenal, like me

1. border: 1px #a0ca9e dotted;
   Ini untuk model border. “1px” untuk ketebalan border, bisa diganti dengan 2px atau 3px.
   “#a0ca9e” ini untuk warna border (hijau). Bisa diganti-ganti misalnya pada contoh pertama warna kuning #c8c785, biru #7c9af0, atau warna-warna yang lainnya.
   “dotted” bentuk border garis putus-putus (titik-titik). Pada contoh yang pertama dengan type “solid” untuk garis biasa.
2. background-color: #e5fce4;
   Ya sudah bisa dimengerti, ini untuk warna backgroundnya. Bisa diganti-ganti.
3. width: 400px;
   Kode untuk panjang border, bisa disesuaikan dengan panjang posting.
4. padding: 5px;
   Jarak huruf dengan garis tepi. Semakin besar angkanya maka jaraknya menjadi semakin jauh. Kode di atas berlaku untuk semua jarak dari atas, kanan, bawah dan kiri.
   Juga bisa dibuat berbeda, misalnya dengan kode padding: 10px 5px; Kode ini membuat jarak atas dan bawah 10px, sedangkan yang kanan dan kiri 5px.
   Jika setiap sisi ingin beda, maka kodenya padding: 10px 5px; atau berbeda semua padding: 10px 15px 5px 8px;
   Jika hanya satu sisi yang berbeda bisa dengan kode padding-left: 10px;

Contoh border ketiga kodenya:
<div style=”border: 2px #a0ca9e solid; background-color: #e5fce4; width: 500px; padding: 5px; text-align: justify;”>Contoh border ketiga</div>

Di bawah ini width saya hapus, agar panjangnya menyesuaikan dengan posting, dan saya tambahi kode margin, jarak border dengan sisi kiri.

Contoh border keempat kodenya:
<div style=”border: 2px #a0ca9e solid; background-color: #e5fce4; margin-left: 60px; padding: 5px; text-align: justify;>Kata di sini</div>

Untuk desain atau model border selengkapnya di bawah, sehingga lebih mudah melihat perbedaannya:

Solid

<div style=”border: 1px solid #000000; background-color:#efefef; padding: 5px; width: 600px;”>
Artikel blog di sini….
</div>

Dotted

<div style=”border: 1px dotted #000000; background-color:#efefef; padding: 5px; width: 600px;”>
Artikel blog di sini….
</div>

Dashed

<div style=”border: 1px dashed #000000; background-color:#efefef; padding: 5px; width: 600px;”>
Artikel blog di sini….
</div>

Double

<div style=”border: 4px double #000000; background-color:#eaebfd; padding: 5px; width: 600px;”>
Artikel blog di sini….
</div>

Groove

<div style=”border: 4px groove #000000; background-color:#edfcf0; padding: 5px; width: 600px;”>
Artikel blog di sini….
</div>

Outset

<div style=”border: 4px outset #000000; background-color:#f9effb; padding: 5px; width: 600px;”>
Artikel blog di sini….
</div>

Ridge

<div style=”border: 4px ridge #000000; background-color:#fafae9; padding: 5px; width: 600px;”>
Artikel blog di sini….
</div>

Urutan penulisan kode bisa dibolak-balik, asal tanda pemisahnya jelas. Pada contoh terakhir yang warna merah. Selain itu kita bisa menghilangkan border pada sisi tertentu. Ambil contoh pada border terakhir, bagian bawah tidak ada garisnya

<div style=”border: 4px ridge #000000; border-bottom: none; background-color: #fafae9; padding: 5px; width: 600px;”>Artikel blog di sini….</div>

Maka dari beberapa contoh di atas, Anda bisa memodifikasi kodenya sesuai dengan kebutuhan. Dengan mencoba-coba langsung sehingga akan lebih mengerti setiap perubahan pada kodenya. Dari semua kode silahkan pilih yang cocok, tentunya menyesuaikan temanya, umpama untuk peringatan agar benar-benar diperhatikan pengunjung, maka background berwarna merah