Cara Mengetahui Kode HTML/URL Gambar

Ada beberapa cara untuk mengetahui dan mendapatkan kode HTML/URL gambar yang akan kita tampilkan di widget atau apa saja di blog kita, seperti dengan menggunakan layanan photobucket, picasa, google drive, google code 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 masuk 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 Pilih file untuk mengupload gambar.5. Selanjutnya klik UNGGAH GAMBAR. Apabila sudah selesai di upload selanjutnya klik selesai

6. Pilih tata letak terserah (Left, Center, Right) dan size nya pilih Original, agar nantinya tidak terlalu banyak kode

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: // ..... sampai dengan 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 : 

9. Setelah selesai diupload kemudian klik Publikasikan atau di simpan di draft juga tidak apa-apa, tak perlu di beri judul (terserah sobat) dan jangan dihapus posting tersebut kalo gambar tersebut akan digunakan sebagai source di widget atau apa saja sehingga nantinya kita tinggal lihat di post tersebut kalau hendak menggunakannya.

10. Sebagai uji coba… anda coba copy kode url gambar anda

Contoh :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOjCA1KMoNncTzWVYacrOiKyhWgt6x3Gs7VEDcxNvCPdb_AtrOZdzVblvL1LuSYg4WiF8g21jdkTSv4bUXMp3v7F_4-A6GgY99MpGYnSM9MPerUpvie0xCAgKB3ARbTFH9M9hhdOfG_I/s1600/Screenshot_42.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" />

jadi seperti :
x

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOjCA1KMoNncTzWVYacrOiKyhWgt6x3Gs7VEDcxNvCPdb_AtrOZdzVblvL1LuSYg4WiF8g21jdkTSv4bUXMp3v7F_4-A6GgY99MpGYnSM9MPerUpvie0xCAgKB3ARbTFH9M9hhdOfG_I/s1600/Screenshot_42.png

" />

Jadi seperti:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOjCA1KMoNncTzWVYacrOiKyhWgt6x3Gs7VEDcxNvCPdb_AtrOZdzVblvL1LuSYg4WiF8g21jdkTSv4bUXMp3v7F_4-A6GgY99MpGYnSM9MPerUpvie0xCAgKB3ARbTFH9M9hhdOfG_I/s1600/Screenshot_42.png

" />

Simpan, kemudian lihat hasilnya…!.

Nah…. Itulah cara pertama dan untuk cara yang ke dua sebenarnya sama saja sih…. seperti pada cara pertama, hanya saja ada langkah lain sebelum langkah ke 1, 2, 3 dst diatas. Untuk lebih jelasnya seperti ini cara kedua :

Sebelum langkah seperti cara pertama :
   1. Buatlah Blog Baru dengan nama apa saja.
   2. Tidak perlu di ini itu
   3. Kemudian pada Pengaturan – Dasar :
         1. (Tidak) pada Tambahkan blog Anda ke daftar kami?
         2. (Tidak) pada Biarkan mesin pencari menemukan blog Anda?
         3. (Ya) pada Tampilkan Editing Cepat di Blog Anda?
         4. (Tidak) pada Tampilkan Link Posting Email?
         5. Tapi itu semua terserah sih….

nah……. langkah selanjutnya sama seperti pada langkah cara pertama dari 1 s/d selesai, hanya saja berarti kita membuat posting gambarnya di blog baru kita tersebut.