Nah, gimana sobat? Keren bukan?
Widget ini gak kalah keren deh sama social plugin lainnya. Yups, kalo mau tau cara bikinnya, monggo ikuti langkahnya.
Cara Widget Social Plugin Melayang
1. Login Blogger.
2. Masuk ke menu Template, pilih Edit HTML.
3. Jangan lupa centang "Expand Template Widget".
4. Cari kode </body>.
5. Copy dan pastekan kode berikut dibawah 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://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'/>
<!-- 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 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'/>
<!-- 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"
});
});
Keterangan :
- Ganti kode # (pagar) dengan URL dari akun jejaring sosial yang sobat miliki. Misalnya twitter : http://twitter.com/lindamarlina40
- Mengurangi tombol social plugin dapat sobat lakukan dengan mengurangi angka 8 pada show: 8, sesuai dengan keinginan sobat.
- Untuk mengubah posisi widget ganti position: "left" dengan posisi yang sobat inginkan. Bisa "right (kanan), top (atas), bottom (bawah)"
- Sobat bisa mengubah backgound social media ini dengan warna gelap dengan mengubah skin: "clear" dengan "dark".
Nah itulah cara membuat widget social plugin melayang di blog. Mudah bukan?
Semoga bermanfaat dan Terima kasih ^_^
0 komentar:
Post a Comment