Senin, 01 Oktober 2012

Mengatur Dan Merapihkan Gambar (Image) Pada Sidebar

Ada empat hal yang harus dilakukan pada pengaturan ini:   
  1. lebar image harus disesuaikan dengan ukuran sidebar
  2. lebar dan tinggi untuk semua image disamakan
  3. menghapus perintah enter (<br/>) yang terdapat pada banner
  4. 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 centerdigunakan 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/>) padascript 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.

sumbernya lupa

Tidak ada komentar:

Posting Komentar