Tuesday, February 4, 2014

Widget Sosial Media dengan Campuran Tooltip


Widget Floating Social Media adalah sebuah widget yang melayang atau bisa disebut dengan 'Floating/Sticky' ini berisi tentang berbagai hal yang bersangkutan tentang Sosial Network/Sosial Media. Widget ini juga bisa bermanfaat sebagai media untuk mempopulerkan Blog kita. Kali ini saya akan menunjukan cara bagaimana cara membuat Widget Sosial Media dengan Campuran Tooltip. Untuk demonya kalian bisa melihat gambar dibawah ini atau melihat Link Demo dibawah ini :


Cara Memasang Widget Floating Social Media Di Blogger/Blogspot

Ok Langsung saja kita Praktikan bagaimana cara membuat Widget Sosial Media dengan Campuran Tooltip.

Langkah-langkah Pembuatan Floating Sosial Media :

1. Buka Blogger.
2. Klik Template.
3. Pilih Edit HTML, Setelah itu tekan tombol CTRL + F untuk mencari. Kemudian cari Kode </body> . Kemudian Copy kode dibawah ini Tepat diatas/sebelum. kode </body> .
<!-- import Scripts -->
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery-1.7.1.min.js"></script>   
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/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'/>
 
<!-- YanuarMega Floating Widget sosial media untuk Blogger -->  
<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: 'URL Twitter kalian', text: 'Follow me on twitter' },
facebook: { url: 'URL Facebook kalian', text: 'Profile on facebook' },
rss: { url: 'URL RSS Feed', text: 'RSS Feed' },
google: { url: 'URL Google +', text: 'Profile on google+' },
youtube: { url: 'URL Profile Akun Youtube Kalian', text: 'Profile on youtube' },
orkut: { url: 'URL Orkut', text: 'Profile on orkut' },
myspace: { url: 'URL Myspace', text: 'Profile on myspace' },
digg: { url: 'URL Digg', text: 'Profile on digg' },
   
},
show: 8,
position: "right",
skin: "clear"
});
   
});
</script>
4. Setelah itu, Save Template. Dan lihat hasilnya.

Keterangan :
Show : Banyaknya Icon Yang di tampilkan.
Position : Posisi dimana Widget itu akan ditampilkan. Ada beberapa pilihan yaitu :
  • left : Kiri Blog
  • right : Kanan Blog
  • bottom : Bawah
  • top : Atas
Skin : Tema/Warna Widget tersebut, Ada beberapa pilihan tema yaitu :
  • clear : Putih
  • dark : Hitam
Mungkin itu saja yang bisa saya sampaikan, Kalau ada salah penulisan saya minta maaf,


Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit
0 Comments
Tweets
Komentar

0 comments:

Post a Comment