Cara membuat Frame / Kotak Menggunakan HTML di Postingan WordPress


html
Ketika akan menuliskan  kode HTML di wordpress biasanya kita meletakkanya dalam frame atau kotak. Selain kelihatan lebih rapi, juga agar lebih mudah untuk di copy paste. Ada banyak jenis kotak yang bisa dibuat dengan HTML, tergantung dari kreasi kita. Berikut beberapa model frame / kotak  beserta kode HTML nya. Kode yang berada di dalam frame adalah kode untuk membuat frame atau kotak tersebut.

Berikut adalah frame yang sering saya gunakan.

 

Contoh  :

<div style="width: auto; color: #000; background-color: #f1f1f1; border: 1px solid #EBEBEB; margin: 0; padding: 10px; border-radius: 4px;">

Contoh  :
<div style="width: auto; background-color: #fff; padding: 4px 4px 4px 7px; border-left: 4px solid #33CCCC; font-size: 14px; border-radius: 4px;">
</div>
</div>

Kedua adalah kotak biasa seperti berikut

<div style="width: auto; background-color: #ffefef; border: 2px solid #cce680; padding: 8px; text-align: left;">
</div>

Ketiga adalah kotak seperti theme yang saya gunakan sekarang (postingan ini dibuat)

Contoh :

<div style="width:auto;height:25px;position:relative;left:5px;background:linear-gradient(-90deg,#D7D7D7,#A9A9A9) repeat scroll 0 0 transparent;border-bottom:1px solid #848484;border-top:1px solid #F5F5F5;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,0.15);">
<span style="margin:0 0 -5px;padding:18px;position:relative;text-shadow:0 1px 0 rgba(255,255,255,0.7);font:bold 15px/25px Georgia, serif;color:#000000;">Contoh : </span></div>

<div style="width:auto;height:90px;position:relative;left:5px;background:#fff;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);margin-bottom:20px;padding:15px 18px;"></div>

Keterangan untuk kode-kode di atas seperti width selain auto dapat di ganti dengan persen misal 70%, backgroung color dapat diganti dengan warna yang diinginkan, border 1px menerangkan ketebalan dari border tersebut, padding adalah jarak antara tulisan dan sisi yang mengelilinginya, kanan, atas,bawah, dan kiri. Backgroun:linear-gradient adalah untuk memberi warna gradient pada kotak. Untuk keterangan HTML selengkapnya dapat di baca di postingan sebelumnya. Demikian semoga membantu

Advertisements

One comment on “Cara membuat Frame / Kotak Menggunakan HTML di Postingan WordPress

Komentarnya please

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s