MENGATUR DAN MERAPIKAN TAMPILAN BANNER
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.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Terima kasih atas perhatian dan kerjasamanya
Sobat sedang membaca artikel berjudul: MENGATUR DAN MERAPIKAN TAMPILAN BANNER
yang ditulis oleh Sonin
Rating Blog 5 dari 5
Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya http://soninkomputer.blogspot.com/2012/07/mengatur-dan-merapikan-tampilan-banner.html atau kode yang ditulis oleh Sonin
Rating Blog 5 dari 5
2 komentar:
MENARIK SEKALI GAN INFONYA.. LANGSUNG KU PRAKTEKKAN...
Makasih tips nya sob saya dah coba dan berhasil Cerita Donk
Posting Komentar