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. UntukCara Pasang Google Translate lengkap dengan link icon bendera dari masing-masing bahasa klik disini dan Cara Membuat Tombol Icon Back To Top klik disini. 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;
untuk di tempatkan slide bar
<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="https://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="https://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="https://onesetia82.files.wordpress.com/2012/02/facebook-64x64.png" alt="Facebook" /></a>
<br>
<a href="http://twitter.com/onesetia82"><img title="Twitter" src="https://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 … 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 …
0 komentar:
Posting Komentar