7 Maret 2012

Cara Pasang Social Network Icon di Blog

Selamat sore teman-teman blogger, kali ini saya ingin sedikit berbagi mengenai bagaimana cara memasang tombol/icon social network ke blog kalian dengan cara menggunakan kode HTML.

Kode HTML ini juga sebenarnya berlaku untuk semua file-file yang umum nya kalian embed ke blog kalian, jadi pada dasar nya script ini dapat kalian kembangkan sendiri nantinya pada halaman HTML bukan pada Blogspot saja. Hanya saja kali ini saya menggunakan gambar/icon social networking yang sebenarnya merupakan icon yang paling umum dan hampir ada pada setiap blog para blogger.

Silahkan di simak tutorial singkat dan sederhana di bawah ini.

Pada halaman rancangan -> add gadget -> add HTML/javascript, silahkan copy dan paste script di bawah ini


<a href="http://twitter.com/mekzz"><img src="http://icons.iconarchive.com/icons/danleech/simple/64/twitter-icon.png" alt="mekz" title="follow my twitter"/></a>

merah : silahkan isi dengan link yang akan anda tuju ketika icon tersebut di klik
hijau : lokasi dari file icon/gambar yang akan kalian gunakan, biasanya ber'ekstensi *.jpg atau *.png



hasil dari contoh script di atas seperti di bawah ini

mekz


icon yang saya gunakan yaitu icon dari danleech, dapat anda temukan pada direktori icon iconarchive. pada direktori icon tersebut anda dapat menemukan beragam macam icon yang mungkin saja ingin kalian pasang/embed ke dalam blog kalian.


lihat icon berikut (contoh)

mekzmekzmekz


untuk membuat icon di atas, script yang saya pergunakan ada di bawah ini,
perhatikan warna merah dan hijau, itu adalah link yang kalian ganti dengan alamat URL milik akun sosial kalian.


<a href="http://www.facebook.com/mekzwashere"><img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" alt="mekz" title="facebook"/></a>


<a href="http://twitter.com/mekzz"><img src="http://icons.iconarchive.com/icons/danleech/simple/64/twitter-icon.png" alt="mekz" title="twitter"/></a>


<a href="http://mekzwashere.blogspot.com/feeds/posts/default"><img src="http://icons.iconarchive.com/icons/danleech/simple/64/rss-icon.png" alt="mekz" title="rss feed"/></a>


Sekali lagi saya harapkan teman-teman memeperhatikan warna merah dan hijau dengan teliti, dan tag-tag seperti " (titik dua) agar script tersebut dapat bekerja sempurna dan tertampil di blog kalian tentunya.

Semoga dari penjelasan singkat ini teman-teman dapat meng'analogikan dan pada akhirnya bisa mengembangkan kreatifitas kalian tentang bagaimana cara meng'embed file pada blogspot dengan menggunakan kode HTML/Javascript.

Semoga artikel ini berguna dan bermanfaat, Wassalam.

sumber: blogspot, google dan saya sendiri

→ Komentar yang menyertakan link aktif, iklan atau titip link akan dimasukan ke folder SPAM
→ Gunakan kode ini utk Emoticon (tanpa ♦)
:) ♦ :( ♦ ;) ♦ :p ♦ =( ♦ ^_^ ♦ :D ♦ =D ♦ |o| ♦ @@ ♦ :-bd ♦ :-d ♦ :ngakak: ♦ :lol: ♦ :love: