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. Dengan 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 :
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
lihat contoh :
Semoga bermanfaat untuk icon….
nah sekarang gimana cara buat icon nya kalo soalitu ane juga ngak jago kalo itu tanya ama sumbernya
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/aarian82"><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/aarian82"><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
lihat contoh :
<div style="display:scroll;position:fixed;top:100px;left:10px;">
<a href="http://www.facebook.com/aarian82"><img
title="Facebook"
src="http://onesetia82.files.wordpress.com/2012/02/facebook-64x64.png"
alt="Facebook" /></a>
<br>
<a href="http://twitter.com/aa_rian82"><img title="Twitter"
src="http://onesetia82.files.wordpress.com/2012/02/twitter-64x64.png"
alt="Twitter" /></a>
</div> Semoga bermanfaat untuk icon….
nah sekarang gimana cara buat icon nya kalo soalitu ane juga ngak jago kalo itu tanya ama sumbernya


Comments
Post a Comment