Cara Mengatur Dan Merapihkan Gambar (Image) Pada Sidebar

Browse » Home » HTML Tutorials » Cara Mengatur Dan Merapihkan Gambar (Image) Pada Sidebar

Cara Mengatur Dan Merapihkan Gambar (Image) Pada Sidebar

Ditulis oleh Kang eNeS Kamis, 25 Februari 2010. 22.16
Label: HTML Tutorials komentar (33)

Meski hari ini keadaan spidi tengah error, tapi berhubung banyak sobat yang, setelah melihat susunan banner pada TabView SC, menanyakan cara bagaimana bisa terlihat rapih seperti itu (bahkan ada juga yang menanyakan bagaimana caranya supaya bisa menjadi tiga kolom), maka saya paksakan juga menulis artikel seputar itu.

Ada empat hal yang harus dilakukan pada pengaturan ini: Pertama, lebar image harus disesuaikan dengan ukuran sidebar, kedua, lebar dan tinggi untuk semua image disamakan, ketiga, menghapus perintah enter (<br/>) yang terdapat pada banner, dan keempat, mengganti perintah enter tersebut dengan perintah margin supaya ada jarak antara image yang satu dengan image lainnya.

Menyesuaikan Ukuran

Setiap kolom, baik sidebar maupun blog-post, memiliki ukuran yang berbeda-beda. Untuk itu perlu dilakukan penyesuaian ukuran gambar (image) dengan ukuran kolom tersebut. Misalnya kita akan menempatkan 3 buah image secara berjajar pada sebuah sidebar yang lebarnya 400px, maka kita harus mengatur ukuran gambar menjadi sekitar 120px (360px:3), dengan asumsi bahwa lebar sidebar telah dikurangi oleh padding kiri-kanan sehingga menjadi sekitar 360px (tergantung pengaturan padding yang ada di CSS-nya).
Cara menuliskan perintahnya seperti ini:

<center>
<img style="border:0px; width:120px; height:50px;" src="URL image 1"/>
<img style="border:0px; width:120px; height:50px;" src="URL image 2"/>
<img style="border:0px; width:120px; height:50px;" src="URL image dst."/>
</center>

Perintah border:0px supaya gambarnya tidak dibingkai dan perintah center digunakan supaya gambar-gambar tersebut diletakkan di tengah-tengah jika masih ada ruang kosong di sebelah kanannya.

Mengatur Jarak

Ada sebagian sobat blogger yang menambahkan perintah enter (<br/>) pada script banner-nya supaya banner-nya diberi jarak dengan banner berikutnya. Padahal untuk memberi jarak, kita bisa menambahkan perintah margin-top (margin atas) atau margin atas-bawah dan kanan-kiri, misalnya seperti:
Memberi margin atas:

<center>
<img style="border:0px; width:120px; height:50px; margin-top:5px;" src="URL image 1"/>
<img style="border:0px; width:120px; height:50px; margin-top:5px;" src="URL image 2"/>
<img style="border:0px; width:120px; height:50px; margin-top:5px;" src="URL image dst."/>
</center>

Memberi margin atas-bawah dan kanan-kiri:

<center>
<img style="border:0px; width:120px; height:50px; margin:3px 1px;" src="URL image 1"/>
<img style="border:0px; width:120px; height:50px; margin:3px 1px;" src="URL image 2"/>
<img style="border:0px; width:120px; height:50px; margin:3px 1px;" src="URL image dst."/>
</center>

Perintah margin:3px 1px mengandung arti bahwa gambar akan diberi margin ke atas dan ke bawah sebesar 3px, serta ke kanan dan ke kiri sebesar 1px.

Angka-angka di atas bukanlah ukuran baku. Kamu bisa mengaturnya sesuai dengan image-image yang kamu pasang. Itu hanya sekedar contoh yang hasilnya bisa kamu lihat pada menu Banner Teman yang ada di bawah.

Nah, segitu aja sob, semoga bermanfaat dan bisa dimengerti.
Selamat mencoba....

Cara Mengatur Dan Merapihkan Gambar (Image) Pada Sidebar

Artikel Terkait Dengan HTML Tutorials

33 komentar Posting Komentar

Tambahkan Komentar

10 Artikel Terbaru

10 Artikel Terpopuler

Blog Tutorials

Seputar SEO

HTML Tutorials

CSS dan Javascript

Komputer dan Internet

Agama

Politik

Sosial Budaya

Sekedar Coretan

Yang Baru Dari Sastra Culun

Direkomendasikan Teman Facebook

33 komentar
Posting Komentar