Selamat datang di: www.jual-rebanamarawis.com ( PUTRA PENDAWA )
Toko / Jual Alat Musik Online dan COD (Cash On Delivery)
Contact Person : Ahmad Royani, ST
TELP/SMS: 08561452465 / 087786060415 / 085286352611 (WA)
PIN BB : 2B4A736C
Home » » Cara Membuat Kode HTML Link Gambar pada Blogspot

Cara Membuat Kode HTML Link Gambar pada Blogspot

Pada postingan sebelumnya telah kita bahas cara membuat link text pada postingan Blog, juga telah dibahas Atribut HTML link pada Blogspot agar SEO Friendlly. Cara menyisipkan gambar dalam postingan juga sudah dibahas pada postingan sebelumnya,maka 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="http://3.bp.blogspot.com/-IKFfS6uMSGQ/T5L_fpzcFkI/AAAAAAAAAdk/M-Dd4twrh98/s1600/blogspot.jpeg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 225px; height: 224px;" src="http://3.bp.blogspot.com/-IKFfS6uMSGQ/T5L_fpzcFkI/AAAAAAAAAdk/M-Dd4twrh98/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="http://3.bp.blogspot.com/-IKFfS6uMSGQ/T5L_fpzcFkI/AAAAAAAAAdk/M-Dd4twrh98/s1600/blogspot.jpeg"><img src="http://3.bp.blogspot.com/-IKFfS6uMSGQ/T5L_fpzcFkI/AAAAAAAAAdk/M-Dd4twrh98/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="http://3.bp.blogspot.com/-IKFfS6uMSGQ/T5L_fpzcFkI/AAAAAAAAAdk/M-Dd4twrh98/s320/blogspot.jpeg"/></a>
Kode tersebut dapat diartikan bahwa Url Gambar yang ditampilkan sebagai link adalah http://3.bp.blogspot.com/-IKFfS6uMSGQ/T5L_fpzcFkI/AAAAAAAAAdk/M-Dd4twrh98/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

Artikel yang lainnya:
Share this article :

7 komentar:

Destur sang Daun Kering mengatakan...

infonya bagus kang

ForumBelajarWeb mengatakan...

Terimakasih mas atas infonya sungguh bermanfaat :D

Budiman mengatakan...

Terima kasih atas informasi ini.

Cara Indonesia Bangkit mengatakan...

Terima kasih atas infonya.. cukup membantu buat kita yang lagi belajar..
semoga sukses selalu
salam Indonesia Bangkit

CPNS 2014 mengatakan...

ternyata begitu caranya ya, thanks dah share :)

Jasa Desain Logo Murah mengatakan...

Thanks, sudah mau sharing dengan kami

Nyoman Somiarta mengatakan...

Makasih infonya sangat membantu sekali..

untuk tambahan ilmu pembuatan website bisa dilihat di situs berikut http://www.computer-course-center.com/web-design.html

TOKO PUTRA PENDAWA

Contact Person : Ahmad Royani, ST


  • TELP/SMS: 08561452465 / 087786060415 / 085286352611 (WA)


  • Alamat : Perumahan Griya Asri Camar A - 18, Kp. Raden RT/RW: 03/07 Kel. Jati Raden Kec. Jati Sampurna Kota Bekasi Jawa Barat KP 17433
  • Klik PETA LOKASI PUTRAPENDAWA
  • Sedia Layanan Antar & bayar di tempat khusus wil Jakarta, Bogor, Depok, Tangerang dan Bekasi (Jabodetabek) dan Sekitarnya
    Terima Jasa Servis / Perbaikan
  •  
    Copyright © 2013. JUAL ALAT MUSIK MARAWIS & REBANA - All Rights Reserved
    Template Created by Mas Template Supported by jual kostum marawis & alat drum band
    Proudly powered by Blogger |