Cara Pasang Social Network di Blog Dengan Icon Menarik

Dalam hal melengkapi konten blog agar tidak terkesan hambar dan tentunya bukan hanya hiasan saja tapi memiliki fungsi yang benar-benar dibutuhkan pengunjung blog seperti dipasangnya google translate, tombol back to top, link social network. Selanjutnya dari segi design agar sedikit menarik dan mempunyai nilai lebih layaknya blog berbayar, google translate, tombol back to top, link social network, coba kita terapkan dengan memakai Icon yang kita buat sendiri menggunakan program Pengolah Gambar Adobe Photoshop, CorelDRAW, dan lain-lain. Untuk Cara Pasang Google Translate lengkap dengan link icon bendera dari masing-masing bahasa klik disini dan Cara Membuat Tombol Icon Back To Top klik disiniDengan dipasangnya social network seperti : My Space, Facebook, Twitter, Flickr, Youtube, dan lain-lain, selain mempercantik tampilan blog, juga sangat berguna untuk memudahkan pengunjung blog jika ingin mengenal lebih jauh lagi tentang pemilik blog apalagi blog tersebut sudah lumayan terkenal keberadaannya.

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

|

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 disiniLalu 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 … !

Social Icon 1

Social Icon 2

Social Icon 3

Social Icon 4

Social Icon 5

Social Icon 6

Social Icon 7

Social Icon 8

Social Icon 9

Social Icon 10

Silahkan tinggal anda pilih-pilih barangkali ada yang cocok dengan selera anda … :D Setelah anda download selanjutnya anda upload untuk diambil URL Berkas dari masing-masing gambar/icon. Cara mengambil URL Berkas lihat disini … !

Selamat mencoba dan semoga bermanfa’at …


Baca Artikel Lain :

Perihal onesetia82
Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma'af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati . . . Selengkapnya ==>

42 Responses to Cara Pasang Social Network di Blog Dengan Icon Menarik

  1. Jual Sepatu Online mengatakan:

    Bisa bikin loading ga nih?

  2. Ping-balik: Teknik Dasar Cara Mewarnai Rambut Dengan Photoshop | multimedia tutorials

Beri Komentar Seikhlasnya Saja ==>

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d bloggers like this: