Membuat Kotak Pada Postingan Blog

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. Berikut cara membuat dan menggunakan kotak border di posting blog. Maaf dan terima kasih.

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 (istilah pastinya tidak tahu :) ). Langsung saja dipraktikkan yuk cara menggunakan bordernya…
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 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: 400px; 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: 400px;”>
Artikel blog di sini….
</div>

Dotted

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

Dashed

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

Double

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

Groove

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

Outset

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

Ridge

<div style=”border: 4px ridge #000000; background-color:#fafae9; padding: 5px; width: 550px;”>

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: 400px;”>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

Contoh border untuk posting blog, kode terakhir :

<div style=”border: 1px #7c9af0 solid; background-color: #d9e1fb; padding: 2px;”>Kata Ada Di SINI</div>

bagaimana pendapat Agan2 semua..??? baguskan.. :D