Cara Membuat Box atau Kotak Dalam Postingan Blog WordPress

Penggunaan kotak atau box dalam sebuah artikel, biasanya digunakan untuk mempertegas atau memberikan penekanan pada bagian tertentu. Misalnya pada paragraf atau tulisan penting, peringatan, atau catatan penting lainnya. Tahukah anda bagaimana cara membuat box atau kotak di dalam postingan blog wordpress anda?

Ada berbagai macam bentuk gaya box yang dapat anda gunakan. Semuanya bisa disesuaikan dengan keinginan anda, dengan sedikit melakukan perubahan pada kode script yang digunakan. Sebenarnya saya sudah pernah membuat post sebelumnya yang membahas tentang bagaimana cara membuat text area. Di artikel tersebut saya menuliskan cara praktisnya saja. Namun kali ini, saya akan membahasa sedikit lebih detail dari sebelumnya. Dan disini, saya memberikan variasi gaya atau style kotak atau box yang dilengkapi dengan kode scriptnya.

Warna, bentuk garis, warna garis, warna background, bentuk huruf dan atribut lainnya dapat anda ganti-ganti sesuai selerta. Tetapi jika anda bingung bagaimana dan apa saja atribut yang harus diganti, atau bagian script mana saja yang bisa dirubah-rubah, infodari akan memberikan panduan cara membuat kotak atau box di dalam postingan.

Sekarang mari kita lihat terlebih dahulu bentuk kotak yang paling mendasar. Kita akan menggunakan penulisan kode:

<div style=”….”> text yang akan diberi style< /div>

KOTAK STANDAR

Kode script yang digunakan adalah:

<div style=“BORDER-RIGHT: #000000 1px solid;PADDING-RIGHT: 5px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; OVERFLOW: auto; BORDER-LEFT: #000000 1px solid; WIDTH: 300px; PADDING-TOP: 5px; BORDER-BOTTOM:#000000 1px solid; HEIGHT: 50px; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: justify“>Isikan tulisan disini</div>

hasilnya akan menjadi:

Isikan tulisan disini

Copy dan paste kode script tersebut, di rancangan pembuatan post blog wordpress anda, dalam mode HTML, bukan mode VISUAL. Sesuaikan posisinya, dimana anda akan menempatkan kotak atau box tersebut.

Sekarang mari perhatikan atribut-atribut struktur kode yang digunakan di dalamnya. Saya sudah buatkan untuk ilustrasinya, sesuai dengan kode script yang digunakan di atas.

* Text warna merah dapat diganti dan disesuaikan dengan keinginan atau kebutuhan.

Klik tombol dibawah ini untuk melihat penjelasan script dan bagian script mana saja yang bisa diganti.

Value

Alternatif pengganti value

BORDER

(Garis batas)

BORDER-LEFT (garis batas kiri)BORDER-TOP (garis batas atas)BORDER-BOTTOM

(garis batas bawah)

BORDER-BOTTOM

(garis batas bawah)

#000000–> warna1px –> ketebalan garissolid –> jenis garis Masukkan kode warna garis lainnya yang anda pilih. (Untuk panduan code warna lihat disini)Masukkan angka lainnya. Semakin besar angka, maka garis semakin tebal.Pilihan:Solid (garis lurus)Dotted (titik-titik)

Dashed (garis putus-putus)

Double (2 garis lurus)

Groove (bayangan)

Outset (efek timbul)

Ridge (efek tenggelam)

PADDING (Jarak antara garis ke text didalam box)
PADDING-RIGHT – (Jarak garis kanan ke text) PADDING-LEFT(Jarak garis kiri ke text) PADDING-TOP

(Jarak garis atas ke text)

PADDING-BOTTOM

(Jarak garis bawah ke text)

5px Masukkan angka lainnya. Makin besar angka, maka makin jauh jarak antar garis ke text di dalam box.
OVERFLOW Auto Pilihan:scroll (efek scroll)Auto (otomasis akan memberikan efek scroll jika area text disempitkan )
WIDTH (ukuran lebar box/kotak) 300px Ubah ukuran sesuai keinginan
HEIGHT(ukuran tinggi box/kotak) 50px Ubah ukuran sesuai keinginan
BACKGROUND-COLOR(Warna background kotak) #ffffff Masukkan kode warna garis yang anda pilih.
TEXT-ALIGN(Margin text dalam kotak) justify Pilihan:- left(rata kiri)- right(rata lanan)- center (rata tengah)- justify (rata kanan dan kiri)

Nah, dengan begitu, kini anda dapat mengutak-atik atribut-atribut di atas; bahkan menambah atau menghapus atribut yang tidak diperlukan. untuk mendapatkan bentuk kotak atau box yang anda diinginkan. Kecuali 3 atribut inti: height, overflow, dan width jangan dihilangkan ya…

Sekarang mari kita satu contoh lagi, dengan mengganti beberapa atribut yang bisa diubah. Dengan menggunakan kode script di bawah ini,

<div style=”BORDER-RIGHT: #cc3300 3px double; PADDING-RIGHT: 10px; BORDER-TOP: #cc3300 3px dashed; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; OVERFLOW: auto; BORDER-LEFT: #cc3300 3px double; WIDTH: 300px; PADDING-TOP: 10px; BORDER-BOTTOM: #cc3300 3px dashed; HEIGHT: 100px; BACKGROUND-COLOR: #ffddff; TEXT-ALIGN: center” > Inilah hasil otak atik kode script pembuatan kotak atau box untuk dipasang di postingan blog wordpress anda.</div>

maka hasilnya akan:

Inilah hasil otak atik kode script pembuatan kotak atau box untuk dipasang di postingan blog wordpress anda.

atau jika anda ingin merubah gaya text didalamnya, anda bisa gunakan kode script berikut:

<div style=”BORDER-RIGHT: #cc3300 3px double; PADDING-RIGHT: 10px; BORDER-TOP: #cc3300 3px dashed; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; OVERFLOW: auto; BORDER-LEFT: #cc3300 3px double; WIDTH: 300px; PADDING-TOP: 10px; BORDER-BOTTOM: #cc3300 3px dashed; HEIGHT: 100px; BACKGROUND-COLOR: #ffddff; TEXT-ALIGN: center” ><font style=”BACKGROUND-COLOR: #ffddff” face=”Verdana” color=”#8000ff” size=”2“><em>Inilah hasil otak atik kode script pembuatan kotak atau box untuk dipasang di postingan blog wordpress anda.</em></font></div>

hasilnya akan seperti dibawah ini:

Inilah hasil otak atik kode script
pembuatan kotak atau box untuk dipasang di postingan blog wordpress
anda.

So, selamat mengotak-atik scriptnya ya. Cari dan dapatkan bentuk atau style yang paling cocok untuk anda.

Nah… akhirnya, selesai sudah saya menuliskan panduan cara membuat kotak atau box dalam postingan. Lumayan, lama juga.. hehehe.. tapi selesai juga. Sepertinya membuat artikel ini sedikit lebih sulit daripada membuat artikel infodari sebelumnya, membuat tombol spoiler, memasang flash banner, dan masih banyak lagi. Mudah-mudahan bermanfaat dan mudah dipahami. Selamat mencoba dan berkreasi ya!

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Captcha Verification : * Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: