waone's articles: Trik Cara Mudah Membuat dan Pasang Gambar-Image Berderet Horizontal

Pasang Gambar-Image Berderet Horizontal dengan CSS dan HTML

Menata gambar dalam sebuah posting memang merupakan kebutuhan vital yang harus tertangani dengan baik oleh blogger yang dengan sungguh-sungguh ingin memberikan sajian terbaik sebuah posting. Sebuah tampilan yang rapi pasti akan memberikan kepuasan batin tidak hanya bagi pemilik blog, namun juga memberikan kenyamanan tersendiri bagi pembaca blog untuk menikmati semua posting yang telah dibuat dengan kerja keras yang tidak hanya melelahkan secara fisik, namun sekaligus membuat pikiran terkadang terasa lunglai bagai tak bertulang!

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 beberapa 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 Dreamweaveratau 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.

Sebagai langkah awal untuk memahami penataan gambar dalam posting, ada baiknya anda juga membuka satu posting di blog ini yang mengupas tentang penggunaan margin untuk menata sebuah gambar yang terdapat dalam:

Bedah Posting gambar dan photo ; fungsi margin
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.

D E M O

Setelah anda melihat DEMO di atas, silahkan anda coba pelajari kode pembentuk gambar berderet di bawah ini, yang dibuat dengan menggunakan 2 cara:
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;
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.

Seperti biasanya, supaya tidak terjadi perubahan pada desain atau rancangan image gallery, saat posting dilakukan seluruh kode harus dibuat dalam bentuk rapat sehingga instruksi kode di atas disusun seperti di bawah ini.

Hasil gambar

Dengan Cara Kedua;
Untuk menggunakan cara ke-2, silahkan simpan kode CSS dalam template setelah login dilakukan. Kode CSS diletakkan dan disimpan di atas kode ]]></b:skin>
, dimana DIV dibentuk sebagai sebuah class (div class="bokskongbolang") dan berfungsi sebagai pembentuk boks Image Gallery. Hampir seluruh kode pengaturan gambar dilakukan di sini (kode CSS). Penambahan width: ..px; juga dilakukan pada beberapa gambar dengan tujuan seperti halnya di atas.
Menggunakan Kode CSS

.bokskongkubolang {
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));
}
.bokskongkubolang img {
height: 100px;
width: auto;
margin: 0px 10px 10px 0px;
float: left;
}

Menggunakan xHTML
Gunakan xHTML di ruang posting. Dengan cara ke-2 ini maka kode HTML yang digunakan di halaman posting menjadi lebih irit. Anda dapat memanfaatkan kode-kode ini setiap kali memerlukan bentuk tampilan yang sama dengan gambar berbeda tanpa perlu lagi membuat kode-kode HTML yang baru.

Hasil gambar

Sampai disini postingan tutorial yang begitu singkat tentang Cara Mudah Membuat dan Pasang Gambar-Image Berderet Horizontal
Selamat mencoba untuk mengganti Scriftnya dengan logo atau gambar anda, happy blogging.

Setelah Membuat dan Pasang Gambar anda pada blog berhasil, mungkin anda tertarik untuk memasang iklan dengan menempelkan iklan banner pada blog anda, silahkan anda baca pada artikel Cara Membuat Iklan Banner Berganti Secara Otomatis atau CARA MEMASANG LOGO DI HEADER BLOGSPOT

Semoga postingan Cara Mudah Membuat dan Pasang Gambar-Image Berderet Horizontal diatas dapat bermanfaat untuk anda, salam sukses selalu ...

Edit; wawansurya
Sumber ;
www.affiliate-waones.com
http://waones-sbm.blogspot.com
http://mitra-sbm.blogspot.com

merchant

Pages

Thursday, January 24, 2013

Trik Cara Mudah Membuat dan Pasang Gambar-Image Berderet Horizontal

1 comment: