Cara Membuat Kode HTML Link Gambar pada Blogspot
Pada
saat kita Mengunggah / upload suatu file gambar ke Blogspot, sama artinya
dengan kita menyimpan file Gambar pada filenya dapat kita sebut sebagai URL.
server blogspot, dan blogspot akan menyimpan file tersebut dengan nama dan alamat tertentu, dimana alamat 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 :
server blogspot, dan blogspot akan menyimpan file tersebut dengan nama dan alamat tertentu, dimana alamat 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/AVvXsEjH4CU2gCbRXYvc4HZoH4ZMQQ7VBXA-VPyzcYUWVzbosF7FQ0TJ_b1UJD6n4Q1eSqiWnXL5ryBCcM_44OUqwaFIvhfFS8529bOnmqJ2KMZHLKRbCaivi2T97Q5_HOg3ct610hzIMKenuV4/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/AVvXsEjH4CU2gCbRXYvc4HZoH4ZMQQ7VBXA-VPyzcYUWVzbosF7FQ0TJ_b1UJD6n4Q1eSqiWnXL5ryBCcM_44OUqwaFIvhfFS8529bOnmqJ2KMZHLKRbCaivi2T97Q5_HOg3ct610hzIMKenuV4/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/AVvXsEjH4CU2gCbRXYvc4HZoH4ZMQQ7VBXA-VPyzcYUWVzbosF7FQ0TJ_b1UJD6n4Q1eSqiWnXL5ryBCcM_44OUqwaFIvhfFS8529bOnmqJ2KMZHLKRbCaivi2T97Q5_HOg3ct610hzIMKenuV4/s1600/blogspot.jpeg"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH4CU2gCbRXYvc4HZoH4ZMQQ7VBXA-VPyzcYUWVzbosF7FQ0TJ_b1UJD6n4Q1eSqiWnXL5ryBCcM_44OUqwaFIvhfFS8529bOnmqJ2KMZHLKRbCaivi2T97Q5_HOg3ct610hzIMKenuV4/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/AVvXsEjH4CU2gCbRXYvc4HZoH4ZMQQ7VBXA-VPyzcYUWVzbosF7FQ0TJ_b1UJD6n4Q1eSqiWnXL5ryBCcM_44OUqwaFIvhfFS8529bOnmqJ2KMZHLKRbCaivi2T97Q5_HOg3ct610hzIMKenuV4/s320/blogspot.jpeg"/></a>
Kode
tersebut dapat diartikan bahwa Url Gambar yang ditampilkan sebagai link adalahhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH4CU2gCbRXYvc4HZoH4ZMQQ7VBXA-VPyzcYUWVzbosF7FQ0TJ_b1UJD6n4Q1eSqiWnXL5ryBCcM_44OUqwaFIvhfFS8529bOnmqJ2KMZHLKRbCaivi2T97Q5_HOg3ct610hzIMKenuV4/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.htmlDemikian postingan Cara Membuat Kode HTML Link Gambar pada Blogspot, jika ada yang belum bisa difahami, silahkan tanyakan melalui komentar dibawah ini. terima kasih
Comments
Post a Comment