Cara Memasang Gambar Berbingkai

Setelah agak jenuh dengan postingan yang berbau bahasa Inggris, sambil mengisi liburan yang lumayan panjang (gak pangjang2 amat si) saya kembali masuk kelasnya kang Rohman untuk belajar setetes ilmu dari beliau tentang cara membuat bingkai pada gambar dalam posting. Lumayan dapat memperinda tampilan posting kita jita ada yang disisipkan foto kita..

Baik kita langsung praktek ja di sini:
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 : 

<a href="http://blogpakdani.blogspot.com/search/label/Various%20Flashcard" target="_blank"><img src="http://i973.photobucket.com/albums/ae211/hamdaniz/sample-big.jpg" border="0" alt="Flashcard" /></a></div>

Gambarnya seperti berikut:


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 di atas, apabila kita sisipkan kode tambahan maka potongan kode gambar diatas akan menjadi seperti ini :

<a href="http://blogpakdani.blogspot.com/search/label/Various%20Flashcard" target="_blank"><img alt="Flashcard" border="0" src="http://i973.photobucket.com/albums/ae211/hamdaniz/sample-big.jpg" style="border: 15px solid rgb(190, 187, 187); float: left; margin: 0px 10px 10px 0px; padding: 3px;" /></a>



Jadi anda tinggal menambahkan kode yang merah setelah kode gambar. ingat hanya bisa dilakukan atau di edit di tab Edit HTML bukan Compose.


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

<table border="20" cellpadding="6" />
<tr>
<td>

kode gambar yang ingin di tampilkan di sini !

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

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 kode gambar diatas adalah sebagai berikut :
<a href="http://blogpakdani.blogspot.com/search/label/Various%20Flashcard" target="_blank"><img src="http://i973.photobucket.com/albums/ae211/hamdaniz/sample-big.jpg" border="0" alt="Flashcard" /></a>

Jadi apabila di satukan dengan kode HTML untuk bingkai, kodenya menjadi seperti ini :
<table border="20" cellpadding="6" />
<tr>
<td>

<a href="http://blogpakdani.blogspot.com/search/label/Various%20Flashcard" target="_blank"><img src="http://i973.photobucket.com/albums/ae211/hamdaniz/sample-big.jpg" border="0" alt="Flashcard" /></a>

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

dan gambar yang akan di tampilkan adalah seperti ini :


Wah lumayan kalo yang ini kesannya lebih 3D.. cukup saja sampai di sini dulu.

.::Related Posts: