Menyelipkan Elemen Web dalam Posting Multiply [Sebuah Catatan]

Untuk user: http://alvast.multiply.com/

Minusnya desain grafis di kantor saya menuntut saya yang tidak bisa mendesain harus bisa melakukan manipulasi Elemen Web dengan teknik CSS. Dalam satu elemen web misal elemen utama BODY bisa terdapat elemen yang lain yang akan kita batasi diawali dengan perintah <div> dan diakhiri dengan </div>, dan harus dilakukan dalam mode EDIT HTML

<div style="diisi dengan properti elemen">

isi elemen atau konten yang ada di dalam div tersebut

</div>

Multiply, mengijinkan usernya untuk memberikan div sendiri di dalam postingnya. Secara standard, Multiply telah menyediakan sendiri untuk mengganti atau menambah Custom CSS di halaman masing-masing contoh div standard MP bernama railstart, contentwrapper, dan lain-lainnya. Namun disamping itu, di setiap posting atau di halaman depan MP sendiri, kita bisa memasukkan elemen sesuka hati kita, hanya saja kita tidak boleh memanggil style dan javascript dari tempat lain.

Sebagai contoh jika saya ingin memberi sebuah elemen dalam sebuah posting, dengan bentuk elemen kotak dengan properti:

latar belakang berwarna kuning (background:#ffeeaa)
bergaris pinggir merah selebar 1 pixel dengan jenis garis penuh (border:1px #de5f9f)
tinggi 300pixel (height:300px)
lebar 400pixel (width400px)
warna foreground (termasuk font) hitam (color:#000000)
margin kiri 30pixel (margin-left:30px)
margin atas 50pixel (margin-top:50px)
padding kiri 30 pixel (padding-left:30px)
padding atas 50 pixel (padding-top:50px)
padding bawah 50 pixel (padding-bottom:50px)

(elemen jenis inilah yang biasa digunakan pak Pez untuk mengirim surat cinta pada pengguna Multiply)

maka saya akan memberikan perintah seperti demikian dalam mode edit HTML:

<div style="width:300px; height:400px; background:#ffeeaa; border:1px solid #de5f9f; margin-left:30px; margin-top:50px; padding-left:30px; padding-top:50px; padding-bottom:50px;">

Isi Konten

bla
bla
bl
bla
bla
bla
bla
bla
</div>

Dan berikut hasilnya:

Isi Konten

Sebagai tambahan keterangan, margin, adalah jarak elemen ini elemen di luarnya... jika hanya dikatakan margin saja maka margin ini berlaku untuk semua sisi. Sedangkan padding, adalah jarak antara batas luar elemen ini dengan elemen dalamnya. Sama dengan margin, jika tidak ditentukan maka akan berlaku seluruh sisi.

Selanjutnya kita bisa juga membuat border kita memiliki ketebalan dan sudut yang tidak runcing. Untuk border yang memiliki ketebalan kita bisa menambahkan nilai Pixel di properti border.. Jika tadi border berisi value : 1px solid #de5f9f, kita bisa menggantikan dengan 2px solid #de5f9f atau dengan nilai lain. Bisa juga solid diganti dengan dotted atau garis bertitik. Sedangkan untuk membuat sudut elemen tidak runcing maka bisa ditambahkan:

border-radius:5px; (chrome)
atau
-moz-border-radius:5px (firefox)
atau
-webkit-border-radius:5px (safari)

Dengan tambahan perintah tersebut, maka empat sudut luar dari elemen tersebut akan memiliki fillet dengan radius 5px. Untuk perbagian bisa diberikan perintah seperti berikut:

border-top-right-radius:5px; (chrome)
atau
-moz-border-top-right-radius:5px (firefox)
atau
-webkit-border-top-right-radius:5px (safari)

Hasilnya adalah, hanya pojok kanan atas yang memiliki border melengkung. Silakan mencoba di http://border-radius.com/.



Kita juga bisa menambahkan properti elemen font-family, contoh:

font-family:Tahoma,'Trebuchet MS',Tahoma,Arial,Geneva,sans-serif;

Dengan kemampuan memanipulasi elemen tersebut maka saya juga bisa membuat efek lembaran kertas, dengan warna yang sedikit berbeda dengan background (background saya adalah #336633, dan saya berikan elemen dengan warna background #337033, dan border kanan dan bawah saya buat lebih gelap (#2e5c2e), dengan div seperti ini:

<div style="margin-left: 40px; background: #337033; width: 400px; height: 300px; -moz-border-radius: 4px 4px 4px 4px; border-bottom: 1px solid #2e5c2e; border-right: 1px solid #2e5c2e; font-family: Tahoma,'Trebuchet MS',Tahoma,Arial,Geneva,sans-serif; color: #ffffff; padding: 10px;">


ISI KONTEN




SELAMAT MENCOBA

</div>

Hasilnya adalah seperti ini:

ISI KONTEN

SELAMAT MENCOBA

Sebuah tulisan secara khusus untuk user: http://alvast.multiply.com/ dan secara umum buat semua

Sejauh kemampuan saya saja, CMIIW

bimosaurus