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