Memasang Social Network Di Blog

Lalu bagaimana Cara Pasang Social Network di Blog Dengan Icon Menarik ? Sebetulnya cara ini tidak jauh berbeda dengan cara memasang google translate dan tombol back to top yang pernah saya tulis pada artikel terdahulu. Yang berbeda hanya link yang dituju serta gambar iconnya saja. Untuk scriptnya kira-kira seperti ini :

Untuk ditempatkan pada sidebar

<a href="URL yang dituju"><img title="Judul Gambar/Icon" src="URL berkas Gambar/Icon" alt="Nama Icon" /></a>

|

Contoh

<a href="http://www.facebook.com/onesetia82"><img title="Facebook" src="http://onesetia82.files.wordpress.com/2012/02/facebook-64x64.png" alt="Facebook" /></a>

|

Gambar Icon seakan-akan melayang (Fixed)

<div style="display:scroll;position:fixed;Posisi Gambar/Icon;">
[script Gambar/Icon]
</div>

|

Contoh

<div style="display:scroll;position:fixed;top:100px;left:10px;">
<a href="http://www.facebook.com/onesetia82"><img title="Facebook" src="http://onesetia82.files.wordpress.com/2012/02/facebook-64x64.png" alt="Facebook" /></a>
</div>

|

Khusus untuk script melayang/fixed pada Posisi Gambar/Icon dapat anda tentukan sendiri sesuai kebutuhan dan selera, disini saya memberi contoh gambar/icon diletakkan di sebelah atas-kiri (seperti social icon yang dipasang di blog saya) maka scriptnya top:100px;left:10px dan untuk ukurannya gunakan satuan pixel saja. Selanjutnya tempatkan script tersebut pada widget text lalu klik simpan, lihat contoh disini. Lalu bagaimana jika gambar/icon dari masing social network tersebut tampilannya supaya berurutan kebawah tidak ke samping …. ? Itu sangat mudah, setiap anda selesai mencantumkan script social network, sebagai pemotong/pemisahnya memakai kode <br> lihat contoh :

<div style="display:scroll;position:fixed;top:100px;left:10px;">
<a href="http://www.facebook.com/onesetia82"><img title="Facebook" src="http://onesetia82.files.wordpress.com/2012/02/facebook-64x64.png" alt="Facebook" /></a>
<br>
<a href="http://twitter.com/onesetia82"><img title="Twitter" src="http://onesetia82.files.wordpress.com/2012/02/twitter-64x64.png" alt="Twitter" /></a>
</div>

|

Nah, sekarang mungkin yang menjadi pertanyaan anda adalah bagaimana cara membuat iconnya … ? Sebetulnya anda tidak perlu pusing dan capek membuat sendiri icon tersebut, sekarang sudah banyak situs penyedia icon gratis yang dapat anda manfa’atkan. Oke saya sediakan 10 icon pilihan yang memiliki dimensi 16×16, 24×24, 48×48, 60×60, 64×64, 128×128. Saya dapat hasil browsing di mbah google, silahkan selebihnya anda cari sendiri.

Follow @Magic4rt Blog