Cara Membuat Kode HTML Link Gambar pada Blogspot

pada kesempatan kali ini saya akan membahas tentang kode HTML dasar untuk menampilkan gambar dalam postingan, Sekaligus cara menggunakan gambar sebagai link dengan kode HTML, sehingga jika kita klik gambar tersebut maka akan membuka alamat URL tujuan Link gambar tersebut. Baiklah,... mari kita mulai ini dengan membahas kode HTML untuk menampilkan Gambar.

Pada saat kita Mengunggah / upload suatu file gambar ke Blogspot, sama artinya dengan kita menyimpan file Gambar pada server blogspot, dan blogspot akan menyimpan file tersebut dengan nama dan alamat tertentu, dimana alamat filenya dapat kita sebut sebagai URL.

Alamat URL tersebut sewaktu waktu kita bisa memakainya untuk keperluan yang lain, misalnya menampilkan gambar tersebut di website lainnya, maka kita cukup menggunakan alamat URL nya saja, tanpa harus mengunggahnya lagi.

Bagaimana caranya kita mengetahui alamat (URL) tersebut?



Saya Upload lagi Logo Blogspot ke dalam postingan ini, dengan cara seperti dijelaskan pada postingan Cara Menyisipkan Gambar pada Postingan Blog (waktu menyisipkan gambar memilih Tata letak kiri)

Untuk dapat melihat alamat url gambar maka Pastikan menggunakan Post Editor pada Mode "Edit HTML" bukan mode "Compose" atau "Tulis" (di pojok kanan atas), kemudian perhatikan kode HTML dari gambar yang dihasilkan ( terletak pada bagian postingan paling atas) kira-kira kodenya seperti ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Gf89L7sreqjkth3tOkbZY_Ngw9lN0bQflPVoIYQfE62wBdlhGhpUAB2DJJq57dAAueO14gMo0DqkeeGmCn178ZbnUpe9p-YOwRvfvJ1vGBtGBp-_ZObYAvdj9X9bGwPs8DzQNGziCLg/s1600/blogspot.jpeg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 225px; height: 224px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Gf89L7sreqjkth3tOkbZY_Ngw9lN0bQflPVoIYQfE62wBdlhGhpUAB2DJJq57dAAueO14gMo0DqkeeGmCn178ZbnUpe9p-YOwRvfvJ1vGBtGBp-_ZObYAvdj9X9bGwPs8DzQNGziCLg/s320/blogspot.jpeg" alt="" id="BLOGGER_PHOTO_ID_5733926194858694210" border="0" />

Untuk mempermudah pembahasan maka kode tersebut diatas saya sederhanakan (karena yang lainnya hanya bersifat atribut dan sudah dijelaskan pada postingan sebelumnya) menjadi:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Gf89L7sreqjkth3tOkbZY_Ngw9lN0bQflPVoIYQfE62wBdlhGhpUAB2DJJq57dAAueO14gMo0DqkeeGmCn178ZbnUpe9p-YOwRvfvJ1vGBtGBp-_ZObYAvdj9X9bGwPs8DzQNGziCLg/s1600/blogspot.jpeg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Gf89L7sreqjkth3tOkbZY_Ngw9lN0bQflPVoIYQfE62wBdlhGhpUAB2DJJq57dAAueO14gMo0DqkeeGmCn178ZbnUpe9p-YOwRvfvJ1vGBtGBp-_ZObYAvdj9X9bGwPs8DzQNGziCLg/s320/blogspot.jpeg"/></a>

Bandingkan dengan kode HTML dasar dari Link Gambar

<a href="Alamat_Url_tujuan_jika_jika_link_gambar_di_klik"><img src="Alamat_Url_Gambar_yang_ditampilkan_sebagai_link"/></a>

Sebelum saya Publish kode Url yang merah saya ganti menjadi Url blog saya, sehingga kodenya menjadi seperti ini:

<a href="http://www.jual-rebanamarawis.com/2012/04/cara-membuat-kode-html-link-gambar-blog.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Gf89L7sreqjkth3tOkbZY_Ngw9lN0bQflPVoIYQfE62wBdlhGhpUAB2DJJq57dAAueO14gMo0DqkeeGmCn178ZbnUpe9p-YOwRvfvJ1vGBtGBp-_ZObYAvdj9X9bGwPs8DzQNGziCLg/s320/blogspot.jpeg"/></a>

Kode tersebut dapat diartikan bahwa Url Gambar yang ditampilkan sebagai link adalah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Gf89L7sreqjkth3tOkbZY_Ngw9lN0bQflPVoIYQfE62wBdlhGhpUAB2DJJq57dAAueO14gMo0DqkeeGmCn178ZbnUpe9p-YOwRvfvJ1vGBtGBp-_ZObYAvdj9X9bGwPs8DzQNGziCLg/s320/blogspot.jpeg sedangkan jika gambar tersebut di klik maka browser akan membuka Url tujuan link yaitu http://www.jual-rebanamarawis.com/2012/04/cara-membuat-kode-html-link-gambar-blog.html

Demikian postingan Cara Membuat Kode HTML Link Gambar pada Blogspot, jika ada yang belum bisa difahami, silahkan tanyakan melalui komentar dibawah ini. terima kasih