Gambar Berbingkai

Rupanya postingan yang kemarin lusa salah alamat alias ga nyambung, maksud dari sobat edelweis adalah membuat bingkai gambar yang ada di postingan, eh postingan saya malah photo profile. Saya yang salah apa bukan ya? tapi biarin deh, kan itupun lumayan buat pengetahuan.

Baiklah, saya kutif pertanyaan lanjutan dari sobat edelweis :

"Maaf Mas, sepertinya cara bertanya saya salah. Maksud saya bingkai untuk postingan gambar, bukan foto profile"

Memang keinginan setiap orang tidak sama, ada yang berkeinginan agar gambar yang ada di blog tidak mempunyai bingkai ada juga malah yang mau ada bingkai nya. Ok, saya coba jawab ya, mudah-mudahan jawaban kali ini tidak salah alamat lagi.

Pertama, tentu saja kita harus mempunyai alamat gambar yang mau di tampilkan, caranya yaitu gambar yang kita miliki harus di upload, bisa ke blogger atau ke hosting lain. Topik ini sudah saya bahas pada postingan terdahulu, bagi yang masih bingung silahkan klik di sini untuk membacanya kembali. Bagaimana kita mengetahui kode HTML dari gambar yang kita upload di blogger? caranya yaitu setelah upload gambar selesai , maka sobat harus berpindah menu ke Edit HTML apabila sedang berada pada menu Compose. Saya ambil contoh gambar yang telah saya upload mempunyai kode seperti ini :

style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 133px; CURSOR: hand; HEIGHT: 113px" height="150" alt="" src="http://2.bp.blogspot.com/_c-XFk4OciTE/RjOIXrUmtPI/AAAAAAAAAKk/2Fs5QJRa0MQ/s200/DSC01367.JPG" width="133" border="0" />


Gambarnya seperti ini :











Bagaimana caranya agar kita bisa membuat gambar tersebut menjadi ada bingkainya? Ini bisa dilakukan dengan menyisipkan beberapa atribut atau kode ke dalam kode gambar tersebut. Tampak pada kode yang saya berikan diatas sengaja saya cetak merah, nah kita bisa menyisipkan beberapa kode di dalamnya, antara lain padding serta border, contoh :

padding:3px;
border:15px solid #BEBBBB;


padding:3px; --> 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, saya ambil contoh sebesar 15 pixel. #BEBBBB --> adalah kode warna yang mau di tampilkan, dalam contoh ini warna coklat.

Merujuk pada kode yang saya cetak merah di atas, 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 :















Agar bingkai tampil lebih menarik, ada kode html yang bisa di pakai, contoh kodenya seperti ini :

kode gambar yang ingin di tampilkan di sini !

Sebagai contoh saya ambil alamat gambar yang sama yaitu pada kode gambar di atas. Untuk mengetahui alamat gambar diatas adalah kita ambil setelah kode src=", yaitu yang di awali dengan http dan di akhiri dengan JPG, sehingga alamat gambar diatas adalah sebagai berikut :


http://2.bp.blogspot.com/_c-XFk4OciTE/RjOIXrUmtPI/AAAAAAAAAKk/2Fs5QJRa0MQ/s200/DSC01367.JPG


Untuk menampilkan gambar, kodenya jadi seperti ini :





Jadi apabila di satukan dengan kode HTML untuk bingkai, kodenya menjadi seperti ini :










dan gambar yang akan di tampilkan adalah seperti ini :





Untuk bingkai yang ini menurut saya lebih menarik daripada bingkai yang pertama karena ada kesan tiga dimensi.


Agar sobat lebih faham, ada kode yang nilainya bisa sobat rubah sesuai keinginan, yaitu :

boder="15" --> nilai "15" adalah tebalnya bingkai sebesar 15 pixel, ini bisa sobat ganti dengan nilai yang di inginkan.

cellpedding="6" --> nilai "6" adalah nilai jarak antara gambar dengan bingkai sebesar 6 pixel, ini bisa sobat ganti dengan nilai yang di inginkan.

Saya rasa cukup nih, selamat mencoba deh.

Salam blogger sejati buat semua !