Membuat Postingan Blog atau Web dalam Kotak

Cara membuat kotak dengan border pada posting blog atau web. Menggunakan kotak border dengan warna dan bentuk berbeda dapat menambah nilai lebih pada postingan. Selain itu tujuaannya untuk memberikan sebuah penekanan terhadap pernyataan yang di anggap penting, unik ataupun peringatan. Mulai dari warna background, model dan warna border dapat diganti-ganti sesuai dengan keinginan.

Dalam fitur blog, sebenarnya sudah tersedia untuk membuat kotak berbeda, yaitu blockquate. Akan tetapi jika dalam satu postingan ada beberapa penekanan terhadap pernyataan, kalau memakai blockquote semua jadi akan terlihat membosankan dan kaku. Maka agar lebih menarik sehingga menjadi tampil cantik dengan membuat kode html untuk kotak-kotaknya.

Cara membuat 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, yaitu :

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;

Demikian sedikit postingan ini semoga dapat membantu para blogger untuk membuat blognya lebih bagus.

Artikel Terkait :