Trik Dan Tutorial Photoshop
Cara Membuat Gambar-Image Berderet Horizontal
Dengan cara pertama ini seluruh kode disertakan langsung saat posting dilakukan tanpa menambah kode lain di template blog.
- DIV berfungsi untuk membentuk boks image gallery.
- Kode CSS dalam tag img untuk mengatur posisi, jarak dan kerapian gambar.
- Margin berfungsi untuk mengatur jarak setiap gambar supaya sama.
- float-left pada tag img untuk membentuk deret gambar ke arah horizontal (ke kiri).
- Height: 100px; mengatur keseragaman tinggi gambar/image.
- width auto membuat gambar dalam skala sesuai aslinya (perbandingan height dan width-nya).
- width: ...px; Pemberian width dengan ukuran ditentukan (dalam px) dilakukan supaya box membentuk tatanan yang rapi dengan sisa margin atas, kanan, bawah dan kiri berukuran sama (pada boks). Perubahan ukuran width pada beberapa gambar ini bisa dalam bentuk pengurangan atau penambahan dengan tujuan sekedar supaya image gallery menjadi rapi. Tentu saja ada sedikit perubahan pada skala gambar jika dibandingkan dengan ukuran dan skala aslinya sehingga diharapkan perubahan tidak terlalu mencolok. Perubahan pada width ini juga dimaksudkan untuk lebih mempermudah penataan daripada harus dilakukan dengan cara memotong gambar menggunakan software seperti Adobe Photoshop.
Dengan Cara Pertama
Dengan cara pertama ini seluruh kode disertakan langsung saat posting dilakukan tanpa menambah kode lain di template blog.
- DIV berfungsi untuk membentuk boks image gallery.
- Kode CSS dalam tag img untuk mengatur posisi, jarak dan kerapian gambar.
- Margin berfungsi untuk mengatur jarak setiap gambar supaya sama.
- float-left pada tag img untuk membentuk deret gambar ke arah horizontal (ke kiri).
- Height: 100px; mengatur keseragaman tinggi gambar/image.
- width auto membuat gambar dalam skala sesuai aslinya (perbandingan height dan width-nya).
- width: ...px; Pemberian width dengan ukuran ditentukan (dalam px) dilakukan supaya box membentuk tatanan yang rapi dengan sisa margin atas, kanan, bawah dan kiri berukuran sama (pada boks). Perubahan ukuran width pada beberapa gambar ini bisa dalam bentuk pengurangan atau penambahan dengan tujuan sekedar supaya image gallery menjadi rapi. Tentu saja ada sedikit perubahan pada skala gambar jika dibandingkan dengan ukuran dan skala aslinya sehingga diharapkan perubahan tidak terlalu mencolok. Perubahan pada width ini juga dimaksudkan untuk lebih mempermudah penataan daripada harus dilakukan dengan cara memotong gambar menggunakan software seperti Adobe Photoshop.
<div style="width: 440px;float: left;margin:
10px;padding: 10px 0px 0px 10px;border: 2px solid #000;border-radius:
10px;-moz- border-radius:
10px;-webkit-border-radius: 10px;background: #996600;background:
-moz-linear-gradient(top, #996600, #99CCFF);background:
-webkit-gradient(linear, 0% top, 100% bottom, from(#996600),
to(#99CCFF));">
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFSbitlX2ChqwQxZAX_vOQQohTcAbscSV_3x99zM9FjyF1jtvTtQylz9L2fgQBM-9wUd8RypoFLeXu4MpIdye2_ed2wpSCRzYvdVjaKdegX__BOR46PUjPcC_aFo2aD5YrKXrBLN-0Mkm2/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTw- AvaPI/AAAAAAAAAos/vsLbByZomPs/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbUHCvgcAbcf2DeAYixzKbkQT9zb7sqv7Mxsj6gre4_dY49eyutLku6Cascr3gqvamOGpfCHz8Yqqy_tx2nl97v-Eyh9I2fQ1KOw7imPkhIOVS3C7PY6OQ-qpLqiZ-cPYUtCWeVJgfTVf/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcovqoygTfHcUFzENDdMKCOl-gJbBY2fEPLuh-0IZsHkxfHJ40l4p0XcJKvMTqMTKlmX1EoRSShgjpYTLk3vAPPzlajKm7WsOiPbx-1eG_QXMkZEd9Z-6YyXjS9OoMP2j9uEZckUvdsL6A/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUnyvYKjXFP3P5XjH-6zRiBhAb-2xqloP0h_ic-uE9h8XbRlCrkxqBQdcSgy5N0RN_boRVhdq-ce90EUccjDmmWKyypLeLNS4VXZpB838UgCP15KJv3BkKJ7h2Db9L6CLilJzvpHAlG3bZ/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjllFHiJtd7_cz3bdPgUYCTdh0qt4ZUj-Wdkdpr-bw0HMkPUkGSkYFOlXW-FI5FNjHKjbgXgZHfD1r3mYE-DQQnQGvRnf-3XCPv6IdkPtL5Ia76wy1lW5GNNhCu_uRp7PLd-8IoGaQnrkR1/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-v3iwEGU19Db0DnV0iIiTxCj2PyAiCs1XTE1J4KEVsrjPz890-cAzTIgf8DaJrXj_m3HVA3fI4zKRZuZLs3Mivw8Rid1SiIUSQhMzbeFdFhyJgHBPAH2zAg1Z1yO5802sfW2EP9q27zdO/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyrNLKhOkknTu-ofeSyx8Ben3xOh0XLmgnpvEaOOqwxSV20ty-N0UrJIr5rpNMbsvc5eSbdCVvX3NIMFRFyIK1h_MhaOksXt7GbY8b0Mm08fEYadMbFbkyJyylpClCoSznpn01HSPkfIDm/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8A2DtcngJ1-nR0AQ6HAoFy9k65eMJ3F5JLMMPGiMk3iolBMGbIAN_tNPdDhO4Ef4yUDFo0XxF8cxWlasFxzvchF0nojs38wV-YLVDGeL-IBQV7HalvvOX_n9p4aiB3Mp2ZWfykOni2yj3/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA7pGgERBMordpeV6R8gsD45BXUsIZZOyoOoFRvfq-P5sF6DWzTwkcaxPNA-7xl56izgpQ9Preg-OM0xJiJ0n8XrFQA3QF4LCKIGP5Qp2OjALQxp8uvMYqwDg9PCIEutxpU1vtWy5pK5zw/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbOcTKFNJguDvVdRlJpp7M398J6K_6CyDutdjiTZwEaQIvU_ElMxWY7rWZaO12px2BWoKFcMDWNZiKQNFJziFMjykb4xxnwspmo3aL_KkDc2suggz5SAZmGN1X0K6WLhbo5ZXXRPofJTT/s320/gbr2.jpg" />
</div>
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFSbitlX2ChqwQxZAX_vOQQohTcAbscSV_3x99zM9FjyF1jtvTtQylz9L2fgQBM-9wUd8RypoFLeXu4MpIdye2_ed2wpSCRzYvdVjaKdegX__BOR46PUjPcC_aFo2aD5YrKXrBLN-0Mkm2/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTw- AvaPI/AAAAAAAAAos/vsLbByZomPs/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbUHCvgcAbcf2DeAYixzKbkQT9zb7sqv7Mxsj6gre4_dY49eyutLku6Cascr3gqvamOGpfCHz8Yqqy_tx2nl97v-Eyh9I2fQ1KOw7imPkhIOVS3C7PY6OQ-qpLqiZ-cPYUtCWeVJgfTVf/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcovqoygTfHcUFzENDdMKCOl-gJbBY2fEPLuh-0IZsHkxfHJ40l4p0XcJKvMTqMTKlmX1EoRSShgjpYTLk3vAPPzlajKm7WsOiPbx-1eG_QXMkZEd9Z-6YyXjS9OoMP2j9uEZckUvdsL6A/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUnyvYKjXFP3P5XjH-6zRiBhAb-2xqloP0h_ic-uE9h8XbRlCrkxqBQdcSgy5N0RN_boRVhdq-ce90EUccjDmmWKyypLeLNS4VXZpB838UgCP15KJv3BkKJ7h2Db9L6CLilJzvpHAlG3bZ/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjllFHiJtd7_cz3bdPgUYCTdh0qt4ZUj-Wdkdpr-bw0HMkPUkGSkYFOlXW-FI5FNjHKjbgXgZHfD1r3mYE-DQQnQGvRnf-3XCPv6IdkPtL5Ia76wy1lW5GNNhCu_uRp7PLd-8IoGaQnrkR1/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-v3iwEGU19Db0DnV0iIiTxCj2PyAiCs1XTE1J4KEVsrjPz890-cAzTIgf8DaJrXj_m3HVA3fI4zKRZuZLs3Mivw8Rid1SiIUSQhMzbeFdFhyJgHBPAH2zAg1Z1yO5802sfW2EP9q27zdO/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyrNLKhOkknTu-ofeSyx8Ben3xOh0XLmgnpvEaOOqwxSV20ty-N0UrJIr5rpNMbsvc5eSbdCVvX3NIMFRFyIK1h_MhaOksXt7GbY8b0Mm08fEYadMbFbkyJyylpClCoSznpn01HSPkfIDm/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8A2DtcngJ1-nR0AQ6HAoFy9k65eMJ3F5JLMMPGiMk3iolBMGbIAN_tNPdDhO4Ef4yUDFo0XxF8cxWlasFxzvchF0nojs38wV-YLVDGeL-IBQV7HalvvOX_n9p4aiB3Mp2ZWfykOni2yj3/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA7pGgERBMordpeV6R8gsD45BXUsIZZOyoOoFRvfq-P5sF6DWzTwkcaxPNA-7xl56izgpQ9Preg-OM0xJiJ0n8XrFQA3QF4LCKIGP5Qp2OjALQxp8uvMYqwDg9PCIEutxpU1vtWy5pK5zw/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbOcTKFNJguDvVdRlJpp7M398J6K_6CyDutdjiTZwEaQIvU_ElMxWY7rWZaO12px2BWoKFcMDWNZiKQNFJziFMjykb4xxnwspmo3aL_KkDc2suggz5SAZmGN1X0K6WLhbo5ZXXRPofJTT/s320/gbr2.jpg" />
</div>
Seperti
biasanya, supaya tidak terjadi perubahan pada desain atau rancangan image
gallery, saat posting dilakukan seluruh kode harus dibuat dalam bentuk rapat
sehingga kode di atas dirubah seperti di bawah ini.
<div style="width:
440px;float: left;margin: 10px auto;padding: 10px 0px 0px 10px;border: 2px
solid #000;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius:
10px;background: #996600;background: -moz-linear-gradient(top, #996600,
#99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600),
to(#99CCFF));"><img style="float:left; margin: 0px 10px 10px
0px; height: 100px; width: auto;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFSbitlX2ChqwQxZAX_vOQQohTcAbscSV_3x99zM9FjyF1jtvTtQylz9L2fgQBM-9wUd8RypoFLeXu4MpIdye2_ed2wpSCRzYvdVjaKdegX__BOR46PUjPcC_aFo2aD5YrKXrBLN-0Mkm2/s320/gbr1.jpg"
/><img style="float:left; margin: 0px 10px 10px 0px; height: 100px;
width: auto;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-6aSU2fmrqZpKyVF4N5XeMzlyuNP6aodbt4Bp5pONts-C2fVf3T7fVQtp1gJe4MRba4X3d1zUoUjOCOom9JBU6gdY0eEIL0Bh9tx1uDO3jm4kb-GIG7fjvs6idEkp2zaBt-wcBsPDuJ1t/s320/gbr9.jpg"
/><img style="float:left; margin: 0px 10px 10px 0px; height: 100px;
width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbUHCvgcAbcf2DeAYixzKbkQT9zb7sqv7Mxsj6gre4_dY49eyutLku6Cascr3gqvamOGpfCHz8Yqqy_tx2nl97v-Eyh9I2fQ1KOw7imPkhIOVS3C7PY6OQ-qpLqiZ-cPYUtCWeVJgfTVf/s320/gbr13.jpg"
/><img style="float:left; margin: 0px 10px 10px 0px; height: 100px;
width:78px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcovqoygTfHcUFzENDdMKCOl-gJbBY2fEPLuh-0IZsHkxfHJ40l4p0XcJKvMTqMTKlmX1EoRSShgjpYTLk3vAPPzlajKm7WsOiPbx-1eG_QXMkZEd9Z-6YyXjS9OoMP2j9uEZckUvdsL6A/s320/gbr6.jpg"
/><img style="float:left; margin: 0px 10px 10px 0px; height: 100px;
width: 115px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUnyvYKjXFP3P5XjH-6zRiBhAb-2xqloP0h_ic-uE9h8XbRlCrkxqBQdcSgy5N0RN_boRVhdq-ce90EUccjDmmWKyypLeLNS4VXZpB838UgCP15KJv3BkKJ7h2Db9L6CLilJzvpHAlG3bZ/s320/gbr3.jpg"
/><img style="float:left; margin: 0px 10px 10px 0px; height: 100px;
width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjllFHiJtd7_cz3bdPgUYCTdh0qt4ZUj-Wdkdpr-bw0HMkPUkGSkYFOlXW-FI5FNjHKjbgXgZHfD1r3mYE-DQQnQGvRnf-3XCPv6IdkPtL5Ia76wy1lW5GNNhCu_uRp7PLd-8IoGaQnrkR1/s320/gbr11.jpg"
/><img style="float:left; margin: 0px 10px 10px 0px; height: 100px;
width: 170px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-v3iwEGU19Db0DnV0iIiTxCj2PyAiCs1XTE1J4KEVsrjPz890-cAzTIgf8DaJrXj_m3HVA3fI4zKRZuZLs3Mivw8Rid1SiIUSQhMzbeFdFhyJgHBPAH2zAg1Z1yO5802sfW2EP9q27zdO/s320/gbr10.jpg"
/><img style="float:left; margin: 0px 10px 10px 0px; height: 100px;
width: auto;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyrNLKhOkknTu-ofeSyx8Ben3xOh0XLmgnpvEaOOqwxSV20ty-N0UrJIr5rpNMbsvc5eSbdCVvX3NIMFRFyIK1h_MhaOksXt7GbY8b0Mm08fEYadMbFbkyJyylpClCoSznpn01HSPkfIDm/s320/gbr114.jpg"
/><img style="float:left; margin: 0px 10px 10px 0px; height: 100px;
width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8A2DtcngJ1-nR0AQ6HAoFy9k65eMJ3F5JLMMPGiMk3iolBMGbIAN_tNPdDhO4Ef4yUDFo0XxF8cxWlasFxzvchF0nojs38wV-YLVDGeL-IBQV7HalvvOX_n9p4aiB3Mp2ZWfykOni2yj3/s320/gbr7.jpg"
/><img style="float:left; margin: 0px 10px 10px 0px; height: 100px;
width: auto;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA7pGgERBMordpeV6R8gsD45BXUsIZZOyoOoFRvfq-P5sF6DWzTwkcaxPNA-7xl56izgpQ9Preg-OM0xJiJ0n8XrFQA3QF4LCKIGP5Qp2OjALQxp8uvMYqwDg9PCIEutxpU1vtWy5pK5zw/s320/gbr4.jpg"
/><img style="float:left; margin: 0px 10px 10px 0px; height: 100px;
width: 98px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbOcTKFNJguDvVdRlJpp7M398J6K_6CyDutdjiTZwEaQIvU_ElMxWY7rWZaO12px2BWoKFcMDWNZiKQNFJziFMjykb4xxnwspmo3aL_KkDc2suggz5SAZmGN1X0K6WLhbo5ZXXRPofJTT/s320/gbr2.jpg"
/></div>
Comments