Excalibur
Info
Saya Senang Anda Berada Di Sini, Dan Berharap Anda Sering Datang Kembali. Silakan Berlama - Lama Di Sini Dan Membaca Lebih Lanjut Tentang Artikel Yang Saya Susun. Ada Banyak Hal Dapat Anda Pelajari, Anda Mungkin Akan Menemukan Sesuatu Yang Menarik

Nama Saya Roy Lichtenstein, Saya Bukan Seorang Blogger,Hacker,Desainer Atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar Dan Ingin Tau Sesuatu Yang Baru...

Pages

Subscribe:

Ads 468x60px

Social Icons

Bedah Posting Gambar Dan Photo ; Fungsi Margin


Aku suka sekali dengan sesuatu yang berkaitan dengan gambar. Dengan mengupas margin di KODE posting gambar berarti ada satu lagi photo wanita cantik yang akan menghiasi blog.

Margin berpengaruh besar dan mempunyai peran vital untuk menciptakan keseimbangan posting, terlebih pada posting yang melibatkan teks dan beberapa gambar. Pengaturan margin akan membuat kita mampu untuk menata mau di bentuk seperti apakah ruangan posting kita. Margin berfungsi untuk menjadi penentu jarak satu bidang dengan bidang yang lain. Misalnya antara teks dengan gambar, gambar dengan gambar yang lain, atau teks dengan tepi ruang posting. Fungsi margin yang lebih luas dalam sebuah blog adalah menjadi penentu jarak setiap ruang blog. (Sepuramu , Dul, aku selalu menggunakan bahasa-bahasa yang gampang dimengerti semua orang karena aku sendiri pusing untuk memahami bahasa dan istilah resmi yang umum digunakan mereka yang cerdas dan mempunyai daya ingat brillian sehingga apaun istilah yang ada di blog, template, internet, dst..dst.., pasti tahu dalam bahasa "pakem"nya. Gen wae, ya, Dul?! Cen bisa ku yo gur semene, kok!!! he....ha...hua...guk..guk..!!!).

Margin umumnya dituliskan dalam nilai pixel atau px (atau biasa juga pakai em --> 1em berkisar 18px) dengan nilai dari minus (-) , 0(nol) dan +(plus). Tanda yang disertakan hanya ketika kita menggunakan nilai minus (-). Besarannya terserah kita mau pakai berapa. Untuk pemakain nilai nol (0) , kadang-kadang nilai pixelnya juga tidak disertakan, sehingga ditulis nol (0) begitu saja.

Margin di gunakan di semua sisi ruang (ada 4 sisi). Dalam penerapannya bisa digunakan secara bersama-sama ataupun terpisah.

- Contoh :

1. Apabila di gunakan secara bersamaan (terpadu) :
Contoh: margin : 4px 6px -3px 12px; ---> urutannya: top, right, bottom, left

2. Margin atas=bawah (margin-top=margin-bottom), margin-left=margin-right dan mempunyai fungsi membuat DIV berada ditengah-tengah.

Contoh-1: margin : 0px auto; ---> top: 0px; bottom: 0px; kanan dan kiri (left and right) akan sama jaraknya (margin auto berfungsi untuk membuat sebuah DIV berada di posisi tengah antara batas sisi kanan dan kiri --> center).

Contoh-2: margin : 20px auto; --> margin-top: 20px; margin-bottom: 20px; margin-kanan dan margin-kiri (margin-left and margin-right) sama dan membuat DIV berposisi ditengah-tengah (atau lebih dikenal dengan posisi center).

3. Margin atas-bawah (top-bottom) dan kanan-kiri (left-right) sama besarnya:
Contoh: margin: 15px 55px;
- margin-top: 15px; margin-bottom: 15px; margin-left: 55px; dan margin-right: 55px;

4. Margin Kanan-Kiri sama sedang atas bawah berbeda :

Contoh: margin: 22px 9px 41px;
- margin-top: 22px; margin-left: 9px; margin-right: 9px; dan margin-bottom: 41px;

5. Margin top, right, bottom dan left berbeda :

Contoh: margin: 7px 6px 16px 40px;
- margin-top: 7px;
- margin-right: 6px;
- margin-bottom: 16px;
- margin-left: 40px;

6. Contoh hasil penempatan gambarnya :


 Kode yang digunakan untuk bagan/fungsi penataan gambar di atas adalah :



Apabila akan dicoba diruang posting blogspot sampeyan harus merapatkan kode html tersebut (kode html dibuat saling menyambung/tidak terputus) hingga bentuknya menjadi seperti di bawah ini:




Tentu saja untuk penataan ini masih harus dipadukan dengan KODE yang lain, misalnya float: left, float:right, align:center border untuk menghias gambar dan juga besaran gambar serta beberapa yang lain. Setidaknya mengetahui sedikit tentang margin ini, akan membuat kita mempunyai semangat untuk mecoba menguak rahasia penggunaan margin disaat-saat ada waktu senggang.

Catatan : Coba buka posting sebelumnya (Merubah Posisi Gambar dan Photo Posting), penggunaan margin dan kode yang lain juga berbeda tergantung kebutuhan dalam posting gambar. Contoh sederhana pada penggunaan posisi gambar di sebelah kiri, tengah atau kanan serta posisi yang tidak ditentukan.

0 comments:

Post a Comment

Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous