CARA MENGETAHUI KODE HTML/URL GAMBAR

Ada beberapa cara untuk mengetahui dan mendapatkan kode HTML/URL gambar yang kita miliki, seperti dengan menggunakan layanan photobucket.com , atau google site dan lain sebagainya. Itu adalah cara yang saya temukan ketika saya googling. Tetapi bagi blogger pemula seperti saya cara tersebut masih agak ribet karena harus reg sana sini, mengingat… ya.. namanya pemula ilmunya masih pas-pasan. Tetapi setelah saya utak-atik-otak dan saya coba-coba ternyata berhasil dan saya rasa cukup mudah.

Saya coba bagi pengalaman saya ini dan mudah-mudahan berguna, terutama bagi blogger pemula (blogger senior mah… ga bakalan gini…. he..he…).

Ada 2 cara yang saya lakukan :
- Sebagai persiapan, siapkan sebuah file gambar apa saja dengan ukuran yang sesuai dengan lebar widget sobat, ya… kira-kira untuk percobaan menggunakan gambar ukuran 150 pixel x berapa lah klo tingginya terserah asal jangan gambar yang gede-gede.

Cara Pertama :


1. Kita buat dulu postingan baru (Entri Baru), tapi setting dulu posting tersebut dengan klik Post Option dan kita buat Dijadwalkan pada tahun yang lebih tua (misalnya 2008)

2. Klik halaman edit HTML jangan di halaman Compose
3. Klik insert image maka akan muncul menu pop up, klik menu browse.. (2) untuk memilih gambar yang akan di upload,

4. Klik Tambahkan gambar lainnya (1) untuk mengupload lebih dari satu gambar.

5. Pilih tata letak tak satupun (3)
6. Selanjutnya klik UNGGAH GAMBAR. Apabila sudah selesai di upload selanjutnya klik selesai
7. Kita akan melihat beberapa paragraf kode, itu menunjukan ada beberapa gambar. Karena kalau hanya satu gambar yang di upload maka kodenyapun hanya satu paragraf dan untuk melihat tampilan gambarnya kita bisa klik Compose

8. Untuk menemukan kode HTML/URL gambarnya, kita kembali lagi ke tampilan edit HTML. Diantara kode-kode tersebut kita akan menemukan kode dengan awalan http://.....s/d extensi file gambar sesuai dengan jenis file gambar apa yang kita upload, bisa .png, .jpg, .gif
dll. Nah… itulah kode url gambarnya.

Contoh : gambar yang saya upload nama file nya
facebook-badge.png
setelah di upload maka kode URL gambarnya adalah kode yang diberi warna merah atau yang berwarna biru di bawah ini : (tapi sebaiknya gunakan kode yang pertama yaitu yang warna merah)

• <div class="separator" style="clear: both; text-align: center;">
  <a href="http://3.bp.blogspot.com/-NfpFsECdOrI/TYyCIIAs54I/AAAAAAAAAII/SSM4HODXr7Q/s1600/facebook-badge.png"http://3.bp.blogspot.com/-NfpFsECdOrI/TYyCIIAs54I/AAAAAAAAAII/SSM4HODXr7Q/s200/facebook-badge.png" width="147" /></a></div>

9. Setelah selesai diupload kemudian klik terbitkan entri, tak perlu di beri judul (terserah sobat) dan jangan dihapus posting tersebut kalo gambar tersebut akan digunakan sebagai source di widget atau apa saja.
10. Sebagai uji coba… anda coba copy kode url gambar anda

contoh :

• http://3.bp.blogspot.com/-NfpFsECdOrI/TYyCIIAs54I/AAAAAAAAAII/SSM4HODXr7Q/s1600/facebook-badge.png

kemudian paste di widget html/javascript baru dengan cara sisipkan kode html/url gambar pada kode dibawah ini:

• <img src="kode html/url gambar" />

Contoh :

• <img src="http://3.bp.blogspot.com/-NfpFsECdOrI/TYyCIIAs54I/AAAAAAAAAII/SSM4HODXr7Q/s1600/facebook-badge.png" />

Kemudian lihat hasilnya…! Atau bisa sobat lihat pada blog saya pada gambar find us on Facebook dan Follow me @twitter yang berada di side bar sebelah kanan. Saya buat gambar tersebut sebagai link untuk menemukan saya di facebook dan twitter

Nah…. Itulah cara pertama dan untuk cara yang ke dua nanti di postingan berikutnya ya…???

Selamat mencoba…. n mudah-mudahan dapat dimengerti. Kalo kurang dimengerti tulis aja di komentar oke..! maklum coba-coba..