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 :

<div style="border: 3px solid #009999; background: #aaa; width: 440px; height: 365px; border-radius: 12px; margin: 20px auto;">
<img style="border: 2px solid #eee; margin: 10px 10px;border-radius:6px;box-shadow:0 0 8px #000; float: left; width:180px; height: 140px; display: block;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEharU_37FWn0d9TPWTm1C0rlqzwSzNZsQXJNsAsiY_SQu5rfXFj93Zu8htLpbNmcY-yucIBvwo6uT_FSRTi0w1x39XpBNDRMOJ-qbb1sWSxJPwuubbrardPypScrom-mzc2rLR99RiKPV8/s200/th_gubhugreyot-pamelaanderson.jpg" />
<img style="border: 2px solid #eee; margin: 50px 10px;border-radius:6px;box-shadow:0 0 8px #000; width: 180px; height: 140px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuC6Qs4GufYCMPF99fR42kxr1bS5sSz3Zo0t13zxFUKpo-VTQ3G4uNm2NmyTa__Kklk3LdYuv9i0qQ6G2-5yFE-VBxB0NakR4DcZXFGg9Zbn-DGOBrR5EmQcs_hRUT605G6yRVI6a3wAc/s200/th_gubhugreyot-pamelaanderson2.jpg" />
<img style="border: 2px solid #eee;border-radius:6px;box-shadow:0 0 8px #000; margin: -40px 10px 15px 130px; width: 180px; height: 140px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRx3CKuEBsvQltnzNKB80Xbkbx9nb9YbPRoavJY5HOb967gXtsK4h8BhNd2gFSjOrY55ScDmIhT-J-FhP7Kf4-5Bc-CEVfFE8jrfmcKEHfHyrARNzfl1-K5zj7crshD3wLsNGgX7aCuc/s200/th_gubhugreyot-pamelaanderson3.jpg" />
</div>

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:

<div style="border: 3px solid #009999; background: #aaa; width: 440px; height: 365px; border-radius: 12px; margin: 20px auto;"><img style="border: 2px solid #eee; margin: 10px 10px;border-radius:6px;box-shadow:0 0 8px #000; float: left; width:180px; height: 140px; display: block;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEharU_37FWn0d9TPWTm1C0rlqzwSzNZsQXJNsAsiY_SQu5rfXFj93Zu8htLpbNmcY-yucIBvwo6uT_FSRTi0w1x39XpBNDRMOJ-qbb1sWSxJPwuubbrardPypScrom-mzc2rLR99RiKPV8/s200/th_gubhugreyot-pamelaanderson.jpg" /><img style="border: 2px solid #eee; margin: 50px 10px;border-radius:6px;box-shadow:0 0 8px #000; width: 180px; height: 140px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuC6Qs4GufYCMPF99fR42kxr1bS5sSz3Zo0t13zxFUKpo-VTQ3G4uNm2NmyTa__Kklk3LdYuv9i0qQ6G2-5yFE-VBxB0NakR4DcZXFGg9Zbn-DGOBrR5EmQcs_hRUT605G6yRVI6a3wAc/s200/th_gubhugreyot-pamelaanderson2.jpg" /><img style="border: 2px solid #eee;border-radius:6px;box-shadow:0 0 8px #000; margin: -40px 10px 15px 130px; width: 180px; height: 140px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRx3CKuEBsvQltnzNKB80Xbkbx9nb9YbPRoavJY5HOb967gXtsK4h8BhNd2gFSjOrY55ScDmIhT-J-FhP7Kf4-5Bc-CEVfFE8jrfmcKEHfHyrARNzfl1-K5zj7crshD3wLsNGgX7aCuc/s200/th_gubhugreyot-pamelaanderson3.jpg" /></div>

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.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Kemis KLIWON, January, 12, 2012

» Happy Blogging - gubhugreyot «