Cara membuat tombol jejaring social melayang dengan JQuery

Salam Blogger.. pada pembahasan kali ini penulis memberikan artikel persis seperti judul diatas. Widget ini memiliki delapan platform Jejaring Sosial paling populer yang muncul dalam bentuk sebuah Bar. Melayang di sepanjang layar blog anda. Dari kedelapan platform tersebut sahabat bloggers dapat memilih dan menampilkan jumlah yang akan ditampilkan.
Untuk contohnya anda dapat lihat gambar dibawah ini, atau dapat dilihat disebelah kiri layar blog ini.

Baik langsung saja, bagi anda yang tertarik menggunakannya silahkan ikuti langkah-langkah dibawah ini ;

Langkah :
Buka akun Blogger Anda
Masuk ke menu edit HTML
Cari kode </body&gt;
Kemudian pastekan kode berikut di atas kode</body>  :

<!-- import Scripts -->
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.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'/>
<!-- MBL 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 :

• Menambahkan URL : Ganti # dengan URL yang Anda inginkan.
• Perubahan posisi : Dalam rangka untuk mengubah posisi widget ganti position: "left" dengan posisi yang Anda inginkan. Bisa "right (kanan), top (atas), bottom (bawah)"
• Mengurangi tampilan media social : Anda bisa mengubah show: 8 dengan jumlah social media yang Anda inginkan.
• Perubahan background : Anda bisa mengubah backgound social media ini dengan warna gelap dengan mengubah skin: "clear" dengan "dark".
• Kemudian save template dan lihat hasilnya.. :)

Sumber : http://www.mybloggerlab.com/2013/01/how-to-create-floating-social-media-bar.html

Artikel Terkait