Membuat Macam-macam Kotak di Postingan

Assalamu'alaikum...

Mayasa©. Penggunaan kotak/ border dengan warna dan bentuk yang berbeda dapat memberikan nilai lebih pada postingan. Meskipun tujuan utamanya adalah untuk memberikan penekanan terhadap pernyataan yang di anggap penting, unik maupun peringatan. Dalam prakteknya kotak/ border tersebut dapat kita modifikasi mulai dari warna background, model dan warna garis tepi/ bordernya.

Dalam fitur blog, sebenarnya sudah tersedia untuk membuat format khusus bagi suatu pernyataan yaitu blockquote. Namun sangat disayangkan karena tampilan blockquote terlihat kaku dan membosankan. Sehingga perlu diberi variasi yang berupa kotak/ border agar postingan menjadi lebih menarik. 

Berikut ini akan saya berikan contoh kotak dan kode HTMLnya yang dapat anda copy sesuai dengan selera anda.

Penulisan kode saat membuat kotak dilakukan pada mode edit HTML, sebab jika ditulis pada mode compose kode-kode tersebut hanya akan dikenali sebagai teks biasa. 

<div style="background-color: #fdfccf; border: 1px solid rgb(200, 199, 133); padding: 10px; text-align: left; width: 200px;">
<b>KATA POSTING DI SINI</b></div>

Kode HTML tersebut jika anda Copaskan ke postingan anda, maka hasilnya akan menjadi seperti :

KATA POSTING DI SINI

Jika contoh tersebut ingin diganti panjang, warna border dan garis tepinya maka cukup dengan mengubah kode HTMLnya pada kata yang dicetak tebal. Silahkan anda bandingkan dengan kode yang pertama.

<div style="background-color: #e5fce4; border: 1px dotted rgb(160, 202, 158);  padding: 5px; text-align: right; width: 400px;">
<b>Contoh border kedua</b></div>

Maka hasilnya akan menjadi seperti berikut:

Contoh border kedua

Keterangan :

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;
   Untuk warna backgroundnya. Dapat sesuai kebutuhan.
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="background-color: #e5fce4; border: 2px solid rgb(160, 202, 158); padding: 5px; text-align: justify; width: 500px;">
<b>Contoh border ketiga kodenya:</b>

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="background-color: #e5fce4; border: 2px solid rgb(160, 202, 158); margin-left: 60px; padding: 5px; text-align: justify;">
<b>Contoh border keempat kodenya:</b>

Untuk desain atau model border selengkapnya dapat anda lihat di bawah ini, dan silahkan perhatikan perbedaannya:

Solid/ Garis tepi berupa garis utuh

<div style="background-color: #efefef; border: 1px solid rgb(0, 0, 0); padding: 5px; width: 600px;">
<b>Artikel blog di sini….</b>
</div>

Dotted/ Garis tepi berupa titik

<div style="background-color: #efefef; border: 1px dotted rgb(0, 0, 0); padding: 5px; width: 600px;">
<b>Artikel blog di sini….</b>
</div>

Dashed/ Garis tepi berupa garis putus-putus

<div style="background-color: #efefef; border: 1px dashed rgb(0, 0, 0); padding: 5px; width: 600px;">
<b>Artikel blog di sini….</b>
</div>

Double/ Garis tepi berupa dua garis utuh

<div style="background-color: #eaebfd; border: 4px double rgb(0, 0, 0); padding: 5px; width: 600px;">
<b>Artikel blog di sini….</b></div>

Groove/ Garis tepi ada dua dengan variasi warna

<div style="background-color: #edfcf0; border: 4px groove rgb(0, 0, 0); padding: 5px; width: 600px;">
<b>Artikel blog di sini….</b></div>

Outset

<div style="background-color: #f9effb; border: 4px outset rgb(0, 0, 0); padding: 5px; width: 600px;">
<b>Artikel blog di sini….</b></div>

Ridge

<div style="background-color: #fafae9; border: 4px ridge rgb(0, 0, 0); padding: 5px; width: 600px;">
<b>Artikel blog di sini….</b> 
</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="background-color: #fafae9; border-color: rgb(0, 0, 0) rgb(0, 0, 0) -moz-use-text-color; border-style: ridge ridge none; border-width: 4px 4px medium; ; padding: 5px; width: 600px;">  
<b>Artikel blog di sini….</b>
</div>

Dari beberapa contoh di atas, dapat anda modifikasi kodenya sesuai dengan kebutuhan dan tema yang anda inginkan. 

Contoh border untuk posting blog, kode terakhir :

<div style="background-color: #d9e1fb; border: 1px solid rgb(124, 154, 240);  padding: 2px;">
<b>Contoh border untuk posting blog, kode terakhir :</b>
</div>

Demikian langkah-langkah membuat dan memodifikasi kotak/ border pada postingan.

Selanjutnya akan saya tayangkan cara membuat kotak pada postingan dengan variasi gradasi warna.

Semoga bermanfaat....

Wassalamu'alaikum....