Thursday, 28 March 2013

Widget Social Plugin Melayang

Selamat datang . Oke sobat kali ini saya akan membagikan satu lagi tips blogging tentang social plugin. Beberapa hari yang lalu saya juga pernah share cara membuat tombol social plugin berbentuk ICE CUBES, kali ini social pluginnya melayang-layang, pengin tau kayak apa? berikut demonya.



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: 'https://twitter.com/arieadie2', text: 'Follow me on twitter' },
facebook: { url: 'https://www.facebook.com/arieadie30', text: 'Profile on facebook' },
rss: { url: 'http://feedburner.google.com/fb/a/dashboard?id=d30ktc85tqmuc9vlibpied1k7k', text: 'RSS Feed' },
google: { url: 'https://plus.google.com/112756918350798570373', text: 'Profile on google+' },
youtube: { url: 'http://www.youtube.com/user/arieadie821', text: 'Profile on youtube' },
orkut: { url: 'http://www.orkut.com/Main#Profile?uid=17377316960235376240', text: 'Profile on orkut' },
myspace: { url: 'http://www.myspace.com/600837781', text: 'Profile on myspace' },
digg: { url: 'http://digg.com/', 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". 
6. Jika semua kode sudah diatur sesuai dengan keinginan sobat, langkah yang terakhir adalah klik tombol "Simpan Template".

Nah itulah cara membuat widget social plugin melayang di blog. Mudah bukan?
Semoga bermanfaat dan Terima  kasih  ^_^



 <!-- 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: 'https://twitter.com/arieadie2', text: 'Follow me on twitter' },
facebook: { url: 'https://www.facebook.com/arieadie30', text: 'Profile on facebook' },
rss: { url: 'http://feedburner.google.com/fb/a/dashboard?id=d30ktc85tqmuc9vlibpied1k7k', text: 'RSS Feed' },
google: { url: 'https://plus.google.com/112756918350798570373', text: 'Profile on google+' },
youtube: { url: 'http://www.youtube.com/user/arieadie821', text: 'Profile on youtube' },
orkut: { url: 'http://www.orkut.com/Main#Profile?uid=17377316960235376240', text: 'Profile on orkut' },
myspace: { url: 'http://www.myspace.com/600837781', text: 'Profile on myspace' },
digg: { url: 'http://digg.com/', text: 'Profile on digg' },
 
},
show: 8,
position: "left",
skin: "clear"
});
 
});

No comments:

Post a Comment