MENGATUR DAN MERAPIKAN TAMPILAN BANNER

Posted by Sonin Senin, 23 Juli 2012 2 komentar

CODE HTML MENGATUR DAN MERAPIKAN TAMPILAN BANNER

Mengatur dan merapikan banner sebenarnya cara ini sudah lama, akan tetapi masih banyak para pengelola blog dan web belum memahami langkah-langkah dalam mengatur banner pada blog. Ini barangali dikarenakan keterbatasan waktu untuk membaca buku kembali atau memang karena belum memahami bahasa pemprograman. Tapi alasan ini saya bukanlah suatu alas an yang tepat, kenapa demikian??????
Ingat Pada zaman sekarang ini kita tidak mesti beli buku untuk belajar hal yang sekecil ini, dan juga kita tidak mesti harus mencari guru atau kursus sebab kalau ilmu segini mah sudah banyak diberikan secara gratis di dunia maya. Dan saya saja mula-mulanya langsung aja Tanya sama manggoogle dan Alhamdulillah saya diberikan jawaban.
Sebelum kita masuk kepada langkah-langkahnya terlebih dahulu yang perlu kita perhatikan adalah sebagai berikut:
Pertama, Lebarimage 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 banner satu dengan banner yang lainnya.

1.      Penyesuaian Ukuran
Ingat bahwa setiap kolom sidebar web maupun blog-post, memiliki ukuran yang berbeda-beda. Untuk itu perlu dilakukan penyesuaian ukuran gambar banner dengan ukuran kolom tersebut. Misalkan kita akan menempatkan 4 buah image secara berjajar pada sebuah sidebar yang lebarnya 500px, maka kita harus mengatur ukuran banner menjadi sekitar 120px (480px:4), dengan asumsi bahwa lebar sidebar telah dikurangi oleh padding kiri-kanan sehingga menjadi sekitar 480px (tergantung pengaturan paddingnya).

Cara penulisan kode html banner adalah seperti ini:


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


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

2.      Pengaturan Jarak
Sebagian 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, contoh caranya sebagai berikut ini:

Pemberian margin atas:


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

Pemberian margin atas-bawah dan kanan-kiri:


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


Catatan:
-          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.
-          Pengaturan di atas bukanlah bentuk bakunya sebab barang kali selera kita berbeda-beda dan tentunya menyesuaikan kebutuhan dan kondisi Sidebar blog atau web kita.


Baca Selengkapnya ....

Popular Posts

Ilmu Blog dan SEO| Desain of DUNIA KOMPUTER.
Estimated worth website
Copyright © 2012 - Dunia Komputer - Desain by Sonin