Cara Menambahkan Icon atau Image Lingking Menggunakan Kode HTML

Jadi dari tiga hari yang lalu saya begadang sampe subuh ngurusin kode HTML yang tidak jua kunjung terpecahka...

















Jadi dari tiga hari yang lalu saya begadang sampe subuh ngurusin kode HTML yang tidak jua kunjung terpecahkan. Iya, saya berencana merubah template lama yang agak kuno itu menjadi tampilan yang lebih manusiawi lah, hihihi. Meskipun tampilannya nggak bagus-bagus amat, setidaknya lebih halus daripada template saya yang lama. Blog ini sudah lama banget nggak terurus, temanya lawas, kalau saya nggak salah sih sudah dari 3 tahun yang lalu sama sekali nggak berubah. Itu bukanlah sebuah kemajuan bagi saya. Bukan cuma temanya yang lawas, tapi juga 'isi'nya. Semenjak saya bekerja, banyak waktu tersita untuk urusan pekerjaan. Sehingga materi blog pun menjadi terbatas.

Setelah bertahun lamanya, berkat libur lebaran, akhirnya saya memperbaharui blog ini lagi dan menambahkan beberapa tema untuk ditulis. Bukan, bukan keren karena nambah bahasan, tapi bebannya itu booooookkk...

Sudahlah, kita lewatkan saja bahasan akan beban yang semakin berat, kembali pada inspirasi hari ini. Terinspirasi dari ke-gaptekan dan keterbatasan wawasan saya pribadi mengenai kode HTML, maka saya berinisiatif untuk membagikan ilmu sekaligus kalau-kalau suatu saat nanti saya ganti template web lagi, saya bisa dengan mudah menggapainya kembali. hihihi. Berikut adalah cara jika kamu ingin menambahkan icon atau image dan terlink ke alamat situs tertentu(misal; banner komunitas, social media icon, dan lain sebagainya) dan diletakkan pada bagian side bar, header, footer., yaitu;

Buka Blogger.com dulu dong
Setelah buka blog menggunakan akun kamu, langsung cekidot aja klik Layout ----- Add a Gadget
Untuk pilihan add a gadgetnya, terserah kamu mau taruh dimana ntar si gambar. Misal mau pilih taruh di header kek, footer, right side bar kek, terserahlah.


Pilih HTML/JavaScript, urutan ke empat dari atas.



Masukkan Kode HTML
Pada kolom yang gedean, lebih lebar, kolom ke dua, masukkan kode ini;

<a href="URL WEB/SOSMED YANG HENDAK DITUJU" target="_blank"><img src="URL GAMBAR" /></a>

Nah kalau ternyata gambar yang pengen kamu masukin ukurannya gede banget, segede gambreng, kamu bisa menambahkan kode ini;

height=100 width=100  

Angka ini adalah ukuran si gambar. Kalau terlalu kecil, boleh di tambahkan. Kalau terlalu besar, boleh dikurangi jumlahnya. Kode lengkapnya adalah sebagai berikut ;

<a href="URL WEB/SOSMED YANG HENDAK DITUJU" target="_blank"><img height=100 width=100 src="URL GAMBAR" /></a>

Hasilnya
Hasilnya seperti yang ada pada blog saya bagian footer. Saya menambahkan banner komunitas yang saya ikuti pada bagian footer dengan ukuran kecil dan kalau di klik, langsung terhubung ke web masing-masing komunitas.


Kemudian, kalau pengen nambahin social media icon kaya di blog saya (icon sebelah kanan pada blog), caranya kurang lebih seperti dibawah ini ;

Pilih Theme --------- Edit HTML

Setelah masuk pada kode HTML, klik disembarang tempat pada kotak kode dan tekan ctrl=F. Biasanya sih ada nih ini kode (tergantung tema, kalau sudah ada terbentuk, biasanya ada) ;
div id='top-social' >
Setelah itu, tempel kode ini dibagian bawahnya;
<a href="URL WEB/SOSMED YANG HENDAK DITUJU" target="_blank"><img height=100 width=100 src="URL GAMBAR" /></a>

See? 
Ada yang berubah? Say yes please!
Kurang lebih begitu sih cara untuk menambahkan gambar dan langsung terhubung pada alamat web. Yang paling gampang sih menggunakan gadget coloumn pada layout. Soalnya kita nggak harus nyari-nyari dulu dimana harus meletakkan si kode. Istilahnya sih cara praktislah, tinggal drag semau kamu aja.

Karena saya bukan ahli, master atau suhu, salah atau kurangnya, boleh ya tambahkan di kolom komentar. Karena sharing is caring, yuk saling membangun dan membantu satu sama lain. Cheers...



post signature

You Might Also Like

1 komentar

  1. sip mb...
    makasih,,,
    baru saja saya juga menambah ikon pada sidebar,,,

    yesss
    cek sini ya mbk www.widjiume.com

    ReplyDelete