Cara Membuat Gambar Foto Berbingkai Pada Postingan Blog


Suatu gambar atau foto akan lebih kelihatan menarik bila dimasukkan dalam sebuah bingkai. Apalagi jika gambar atau foto tersebut merupakan gambar kesayangan. Bagi Anda yang baru membuat toko online bisa saja memanfaatkan bingkai ini untuk memajang gambar dagangan Anda agar terlihat lebih menarik.

Kali ini saya ingin berbagi dengan Anda bagaimana cara membuat gambar foto berbingkai. Caranya cukup mudah,
Untuk membuat gambar foto berbingkai,pertama yang harus dipersiapkan adalah sebuah gambar.
 Sebagai contoh di sini saya mempunyai sebuah gambar foto dengan alamat gambar

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnkZPXi0ClX5VU1TmuqRQMbXZ2kSgeQmcY7HbYgPCKlOGsNcmdiYSEMI1e-CK1LQXn1lodALMlHSISphT-2W3uUlhGkC9hdwI3s__21itZNrBsFBC22esTNVx_RkGk5RXj23ap8IISyc/s320/cooltext1061785877.png

Agar gambar ini bisa di upload ke dalam blog maka gambar ini harus ditambahkan sebuah kode <img src="http:alamat gambar.jpg"/>

Setelah kode ditambahkan maka bentuk alamat gambarnya akan seperti ini:

  <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnkZPXi0ClX5VU1TmuqRQMbXZ2kSgeQmcY7HbYgPCKlOGsNcmdiYSEMI1e-CK1LQXn1lodALMlHSISphT-2W3uUlhGkC9hdwI3s__21itZNrBsFBC22esTNVx_RkGk5RXj23ap8IISyc/s320/cooltext1061785877.png "/></img>

Dan ketika diposting gambar yang akan muncul seperti ini:


Setelah gambar siap maka kita buat bingkainya:
Karena bingkai yang akan dibuat memanfaatkan sebuah table maka harus dibuat kode tablenya terlebih dahulu.
Kode table yang digunakan adalah :
<table border="15" cellpadding="10" cellspacing="1">
<tr>
<td bgcolor="#FF3300">

Masukkan gambar fotonya di sini.

</td></tr></table>

Setelah kode kita buat tinggal memasukkan gambarnya.
Setelah alamat gambar dimasukkan maka kode lengkapnya akan seperti ini:

<table border="15" cellpadding="10" cellspacing="1">
<tr>
<td bgcolor="#FF3300">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnkZPXi0ClX5VU1TmuqRQMbXZ2kSgeQmcY7HbYgPCKlOGsNcmdiYSEMI1e-CK1LQXn1lodALMlHSISphT-2W3uUlhGkC9hdwI3s__21itZNrBsFBC22esTNVx_RkGk5RXj23ap8IISyc/s320/cooltext1061785877.png"></img>
</td></tr></table>

Maka hasil dari kode gambar foto berbingkai di atas setelah diposting akan seperti di bawah ini:


Keterangan dari beberapa astribut yang dipakai:
-Border : tebal atau lebar garis bingkai.
-Cellpadding : background atau jarak antara gambar dan cellspacing.
-Cellspacing : jarak antara background dan bingkai atau border.
-bgcolor : merupakan warna background atau warna cellpadding.

0 komentar:

Catat Ulasan