Cara Membuat Widget Social Media Melayang - Jejaring Sosial atau yang sering disebut social media adalah tempat untuk berkomunikasi di dunia maya, yang menghubungkan suatu organisasi atau individu dengan organisasi atau individu lainya yang mereka sukai. Sebelumnya saya juga telah membahas tentang cara membuat widget 3in1 Social Media Melayang di sisi kanan Blog, namun pada kesempatan kali ini saya akan mengulas dan memberikan variasi-variasi widget yang lebih menarik lagi untuk di pasang di blog, widget social media atau social plugin kali ini mempunyai tampilan yang sederhana nan elegan, karena desainya berbentuk minimalis dan dipadukan dengan warna yang serasi dan matching.
Pada widget social media ini terdapat 8 button atau icon dari masing-masing social media yang tersusun secara vertikal, dengan dibalut oleh cover berwarna hitam. Jejaring sosial di widget ini meliputi Twitter, Facebook, Digg, Youtube, Google+, RSS Feed, Myspace, dan Orkut. Namun, jika anda seorang yang mempunyai keahlian editor, bisa saja anda membuat icon salah satu jejaring melalui software editor dan anda ganti salah-satu jejaring sosial bawaan widget dengan jejaring sosial yang anda kehendaki, atau jika anda tidak ingin 'ribet' mendesainya, anda bisa mencari icon-icon sosial media yang bertebaran luas di Internet.
Bisa dilihat pada gambar animasi atau gif diatas, setiap kali pengunjung mendekatkan kursor mouse-nya ke icon social media, maka secara otomatis akan muncul keterangan tentang social media secara horizontal, misalnya 'Profile On Google+'. Well, bagi anda yang berminat, silahkan disimak yang berikut ini.
1. Login Ke Blogger.
2. Pilih Template.
3. Pilih Edit HTML.
4. Centang box 'Expand Template Widget'.
5. Cari kode </body> menggunakan CTRL+F atau F3.
6. Lalu letakkan kode di bawah ini tepat dibawah kode </body> tadi.
<!--farhanshare.blogspot.com Scripts -->
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>
<!-- farhanshare.blogspot.com Social Media Bar For Blogger -->
<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: '#', text: 'Follow me on twitter' },
facebook: { url: '#', text: 'Profile on facebook' },
rss: { url: '#', text: 'RSS Feed' },
google: { url: '#', text: 'Profile on google+' },
youtube: { url: '#', text: 'Profile on youtube' },
orkut: { url: '#', text: 'Profile on orkut' },
myspace: { url: '#', text: 'Profile on myspace' },
digg: { url: '#', text: 'Profile on digg' },
},
show: 8,
position: "left",
skin: "clear"
});
});
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>
<!-- farhanshare.blogspot.com Social Media Bar For Blogger -->
<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: '#', text: 'Follow me on twitter' },
facebook: { url: '#', text: 'Profile on facebook' },
rss: { url: '#', text: 'RSS Feed' },
google: { url: '#', text: 'Profile on google+' },
youtube: { url: '#', text: 'Profile on youtube' },
orkut: { url: '#', text: 'Profile on orkut' },
myspace: { url: '#', text: 'Profile on myspace' },
digg: { url: '#', text: 'Profile on digg' },
},
show: 8,
position: "left",
skin: "clear"
});
});
</script>
'
Keterangan:
- Ganti kode '#' dengan URL akun jejaring sosial yang anda miliki, Misalnya Facebook: http://facebook.com/farhanshare, Twitter: http://twitter.com/farhancorps.
- Anda dapat mengatur berapa icon jejaring sosial yang ingin ditampilkan, ganti angka 8 pada show: 8 dengan jumlah icon social media yang ingin ditampilkan secara vertikal, misalnya 6.
- Anda bisa merubah posisi widget social media melayang di tepi blog ini dengan mengganti kode left dengan posisi yang anda inginkan, misalnya Right (Kanan), Top (Atas), dan Bottom (Bawah).
- Anda juga bisa merubah warna dari tampilan widget social plugin ini dengan merubah kode clear menjadi Dark (gelap) atau tetap Clear (Putih).
Demikian tutorial blog tentang Cara Membuat Widget Social Media Melayang, semoga bermanfaat, dan selamat mencoba.