Jumat, 22 Januari 2010

Membuat Gambar Berbingkai

Gambar biasa + bingkai pasti bagus. Nah di tutorial kali ini, topik membua gambar berbingkai inilah yang akan dibahas hari ini.
Cara untuk memasang bingkai pada foto atau gambar yang diunduh ke blog kita itu sebenarnya gampang.

Sebagai contoh, saya akan menggunakan gambar ini.



Nah, sekarang akan ditambahkan sebuah bingkai kedalam gambar ini.
Perhatikan ini adalah kode HTML dari gambar tersebut :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSmksPepKL9wsIpOe2NdU8sToSPBrGF_IZA-hag-wJdXr8Mu71NNx4QyHEL5YTMGn9iwqF26FsEbUGhwS37vwCEqSdhwyRDtH3QgPJY18iO8mtw4Z-9QLR69yqraqYofk1tXAIVU_v2MUp/s1600-h/skies_002.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 256px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSmksPepKL9wsIpOe2NdU8sToSPBrGF_IZA-hag-wJdXr8Mu71NNx4QyHEL5YTMGn9iwqF26FsEbUGhwS37vwCEqSdhwyRDtH3QgPJY18iO8mtw4Z-9QLR69yqraqYofk1tXAIVU_v2MUp/s320/skies_002.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5429599673858778546" /></a>

Perhatikan tulisan-tulisan yang saya tandai dengan warna merah. nah kita bisa menyisipkan beberapa kode di dalamnya, antara lain padding serta border, contoh :

padding:3px;

border:15px solid #BEBBBB;

yang dimaskud dengan padding:3px; adalah padding adalah jarak atau ruang kosong yang kita buat agar terpisah dengan border (bingkai) dalam contoh ini yaitu sebesar 3 pixel. Apabila sobat tidak menginginkan ada jarak, maka jangan tambahkan kode ini.

border:15px solid #BEBBBB; --> border adalah besarnya bingkai yang akan di buat, intan ambil contoh sebesar 15 pixel. #BEBBBB --> adalah kode warna yang mau di tampilkan, dalam contoh ini warna coklat.

apabila kita sisipkan kode tambahan maka potongan kode gambar diatas akan menjadi seperti ini :

style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 133px; CURSOR: hand; HEIGHT: 113px; padding:3px; border:15px solid #BEBBBB;"


Maka gambar yang di hasilkan akan seperti ini :



Gimana?? Sekarang gambarnya jadi memiliki bingkai kan??

Tidak ada komentar:

Posting Komentar