Cara Membuat Gambar Berderet Horizontal pada Blog

Menata beberapa gambar dalam sebuah posting memang berbeda dengan apabila kita hanya menampilkan sebuah gambar/image. Untuk satu gambar kita cukup letakkan saja dipojok kiri (float: left;) atau di pojok kanan (float:right;), maka semua selesai sudah dan posting mengalir bagai kali ciliwung. Ada cara yang cukup sederhana untuk membuat penataan gambar berderet/berjajar dalam arah horizontal dengan tampilan yang rapi. Satu yang perlu dipahami adalah dengan mengetahui kegunaan margin serta fungsi float. Secara sederhana margin merupakan jarak antara satu bidang dengan bidang yang lain dalam sebuah web/ blog, sedang float berfungsi untuk mengatur posisi gambar atau tag (DIV, p dll) supaya berada pada posisi kanan, kiri, tak dikanan dan/atau kiri dan sekaligus float mampu membuat sebuah tag secara

otomatis mempunyai luas sebesar isi yang terkandung di dalamnya. Sifat yang seperti ini amat dibutuhkan untuk membuat materi (gambar atau tag lain) dapat tersusun secara berderet horizontal secara otomatis. Penggunaan float menguntungkan karena membuat width atau height terkadang tidak dibutuhkan untuk ditambahkan.

Untuk membangun sebuah desain yang bernilai lebih tentunya tidak hanya margin dan float yang harus dipahami fungsi dan kegunaanya. Kode CSS yang lain seperti border, padding, background serta beberapa yang lain akan banyak memberikan support hingga dihasilkan sebuah tampilan yang lebih cvcantik dan menarik. Hal yang sebenarnya tidak terlalu sulit untuk dilakukan, namun demikian satu hal yang utama adalah ketelatenan dan semangat serta kemauan yang keras untuk mencoba memahami satu demi satu setiap fungsi dan kegunaan kode HTML. Satu fasilitas (software) yang paling diperlukan untuk mempermudah pemahaman tentang kode HTML adalah dengan cara menggunakan software Dreamweaver atau yang kini lebih dikenal dengan Adobe Dreamweaver CS5. Cobalah untuk mencari software ini supaya lebih mudah dan cepat mempelajari kode CSS, xHTML, javascript ataupun PHP.

Kode utama untuk membuat sebuah gambar dalam bentuk deret horizontal :

- penggunaan margin

- float-left

- padding (untuk membentuk penataan ruang yang rapi)

- width dan height

- sebaiknya setiap gambar mempunyai tinggi yang sama, dimana ketinggian gambar bisa langsung diatur melalui kode CSS sekalipun gambar sebenarnya mempunyai tinggi yang tidak sama.

sebagai contoh: jika gambar asli tinggi= 200px, maka gambar bisa dibuat menjadi hanya bertinggi 100px atau misalnya 55px hanya dengan membuat kode CSS --> height: 100px; atau height: 55px;

- untuk border, background, border-radius, box-shadow atau yang lain akan dengan mudah dipelajari setelah pemahaman tentang kode-kode di atas sudah terpelajari dengan baik.

Untuk DEMO silahkan anda lihat di SINI.

Berikut adalah langkah-langkah untuk membuat gambar berderet horizontal.

1. Mengatur gambar secara langsung dengan menyertakan setiap kode CSS yang berupa margin, width, height dan float, padding, border, border-radius dan background dalam tag img. 2. Membuat kode CSS terpisah dengan tag img.

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/AVvXsEhiFn7t9oNpKEUJiMrN4KR_j8g-c8mQL4Cx-CuUwqKgAXk-_8Prs5F1Jh_Q0cqNu25zXOoYLFs7qVbAR_3C6uBIGFS-gaz0VniKobJDpS2rIOz3QZvNuNlLlu5Yi5UC_20KW_mZmT42TzQX/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUVpU7CWTCdqBXhpTUgFr8BJjTsIW1a0h2GHUsfz-9UPNvvBIvdnViYs-TqBTiTwERm9RKKez-gVkjk2e4hR3mzoTEZRrv57fYzfayK3OrTm-co-vaorWrDx6Gq6faUzI-7ThuJ5BqRqie/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9H6LKCr8jTyPQ8ldgZ1ZCD00vY5RNggZIaLBPAsumtlUVvRez6l48pEMdhAZhFD76YhZbEMYbIyDIti9r8eoSjnRuuuV8VlZJ7o3iKYb2Cu3WJvGkGdDBYdrQya4BDIA6uiw5cZofBOjd/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCOnvLp5Xm4P9pz6cqqA_hU0gWR2aApuFRRc3JquCs_T5WS5tjadQwsElpa1ZsEuCh6aj5gxPTc1zuDNyIl0jR3YAof1_xVYWbPcVP0oecObSarR0wViQIXnTumexcBDnhoWYhl6FwUAVO/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHylZfQGKNftZPowcME6qk3MVaFk0kHLekLE85CQquUwPLUBeNAJg38VLuKS8WXPARRRSnFJJk8UR17yTJZ1Pqy7g0ZY12EOfhB2HHWzneHRInixF_kT1P-F9HlfQV7vJGoNzpp-IJQ98t/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0XnSsGz0DHWO_goNWlD8WqGNnNylVMb3yOCD1b3GUBypOaBxNnLrIMHA6iLULzdh_l3Qh3j5f1xpq90GjVshdbUIeI3sFOeSnuXsf2s_WbNfljozIvLbM0ws7jUuwueNgzNbICsucD5d/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_U6HwDamKoMfS4iMsg77_p3eMAWfs4Q5YizOUJT6H1MDjgo2fPFXTzlSoUgwI1v3JGFpzWfuMUEKef_FPeX1vh12VLVjWLsAaPJ9ewPloSdnQZw2mtZ4s8RnFje57qn-9bFu5PQN4p21F/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAP2S2mpe2X7DsmgtQX0xw7ixYwHlfhNrbHMlVJmXUmjJRcQkgYBdT_L5tl8OysnSgdYf6MYr26NOBNQeLm0_RzhoOFPcS9Zg0hIHWqMJJK9D17317EnHJozd4owGqEJAVRHXN36MKzF8j/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoCsUhyphenhyphenBdAPj4vsGuo4enkG9VmadSLyhhDDsUa_HZWvpEkDYmMeHC5BYQTA16aOin9XwzspOMjEQs5mH7mbgeiGyQTIwzK3O4_rxgmy0A9yi2__D3SIQqpHwkwHEBm9aQjUh9_Mz-LBmOh/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtQ0AMcpLaMgYtvApYwfgbHiDR6wSUdckCoRf5bJsDO6I0OX2URWFm7-ImIBauD_D_JaJzoHylwxaM4RgYX-tW2f52YMF7NVWg1mz8I3qG7RMde7E6W2vzbggJZ1XrBZ_DMv183pP3IpI/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3nlHldA4pbcIec6fa7uO5mxEPgRlTu2bCXh6Yw4QF1j_aqXx1FYPB3htVoRk_gz5AMh6aJziMLSueREXe1v4YZ1et8ju4Pl90a1daWG3AzGkDNpCo0H32rZal7HdCjmPDe86t8ainWhF/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/AVvXsEhiFn7t9oNpKEUJiMrN4KR_j8g-c8mQL4Cx-CuUwqKgAXk-_8Prs5F1Jh_Q0cqNu25zXOoYLFs7qVbAR_3C6uBIGFS-gaz0VniKobJDpS2rIOz3QZvNuNlLlu5Yi5UC_20KW_mZmT42TzQX/s320/gbr1.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUVpU7CWTCdqBXhpTUgFr8BJjTsIW1a0h2GHUsfz-9UPNvvBIvdnViYs-TqBTiTwERm9RKKez-gVkjk2e4hR3mzoTEZRrv57fYzfayK3OrTm-co-vaorWrDx6Gq6faUzI-7ThuJ5BqRqie/s320/gbr9.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9H6LKCr8jTyPQ8ldgZ1ZCD00vY5RNggZIaLBPAsumtlUVvRez6l48pEMdhAZhFD76YhZbEMYbIyDIti9r8eoSjnRuuuV8VlZJ7o3iKYb2Cu3WJvGkGdDBYdrQya4BDIA6uiw5cZofBOjd/s320/gbr13.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCOnvLp5Xm4P9pz6cqqA_hU0gWR2aApuFRRc3JquCs_T5WS5tjadQwsElpa1ZsEuCh6aj5gxPTc1zuDNyIl0jR3YAof1_xVYWbPcVP0oecObSarR0wViQIXnTumexcBDnhoWYhl6FwUAVO/s320/gbr6.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHylZfQGKNftZPowcME6qk3MVaFk0kHLekLE85CQquUwPLUBeNAJg38VLuKS8WXPARRRSnFJJk8UR17yTJZ1Pqy7g0ZY12EOfhB2HHWzneHRInixF_kT1P-F9HlfQV7vJGoNzpp-IJQ98t/s320/gbr3.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0XnSsGz0DHWO_goNWlD8WqGNnNylVMb3yOCD1b3GUBypOaBxNnLrIMHA6iLULzdh_l3Qh3j5f1xpq90GjVshdbUIeI3sFOeSnuXsf2s_WbNfljozIvLbM0ws7jUuwueNgzNbICsucD5d/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_U6HwDamKoMfS4iMsg77_p3eMAWfs4Q5YizOUJT6H1MDjgo2fPFXTzlSoUgwI1v3JGFpzWfuMUEKef_FPeX1vh12VLVjWLsAaPJ9ewPloSdnQZw2mtZ4s8RnFje57qn-9bFu5PQN4p21F/s320/gbr10.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAP2S2mpe2X7DsmgtQX0xw7ixYwHlfhNrbHMlVJmXUmjJRcQkgYBdT_L5tl8OysnSgdYf6MYr26NOBNQeLm0_RzhoOFPcS9Zg0hIHWqMJJK9D17317EnHJozd4owGqEJAVRHXN36MKzF8j/s320/gbr114.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoCsUhyphenhyphenBdAPj4vsGuo4enkG9VmadSLyhhDDsUa_HZWvpEkDYmMeHC5BYQTA16aOin9XwzspOMjEQs5mH7mbgeiGyQTIwzK3O4_rxgmy0A9yi2__D3SIQqpHwkwHEBm9aQjUh9_Mz-LBmOh/s320/gbr7.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtQ0AMcpLaMgYtvApYwfgbHiDR6wSUdckCoRf5bJsDO6I0OX2URWFm7-ImIBauD_D_JaJzoHylwxaM4RgYX-tW2f52YMF7NVWg1mz8I3qG7RMde7E6W2vzbggJZ1XrBZ_DMv183pP3IpI/s320/gbr4.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3nlHldA4pbcIec6fa7uO5mxEPgRlTu2bCXh6Yw4QF1j_aqXx1FYPB3htVoRk_gz5AMh6aJziMLSueREXe1v4YZ1et8ju4Pl90a1daWG3AzGkDNpCo0H32rZal7HdCjmPDe86t8ainWhF/s320/gbr2.jpg" /></div>

Jangan lupa mengganti url gambar tersebut dengan url gambar kamu.