Cara Membuat Widget Social Media Melayang Di Blog

Oleh Unknown

Sabtu, 10 Januari 2015

Bagikan :

Tweet

Social Media atau jejaring social merupakan alat komunikasi di dunia maya, beberapa jejaring sosial yang terkenal dan digemari masyarakat indonesia diantarnya facebook, twitter. tetapi sudah banyak jejaring social yang lain. misalnya g+, myspace dan lain-lain.

Pada kesempatan kali ini saya akan share bagaimana membuat widget social media pada blog, tujuanya supaya lebih mudah dalam hal berkmunikasi. Pada widget ini terdapat 8 icon social media, seerta memiliki background warna hitam. widget social media ini terdiri dari Facebook, Twitter, Youtube, Digg, Google+, Rss Feed, Orkut, dan Myspace, yang disusun secara vertikal.

Bisa anda lihat gambar diatas, jadi begitulah bentuk widget yang akan anda pasang pada blog anda. Apabila curcor kita didekatkan ke salah satu icon, maka otomatis akan muncul keterangan. misalnya jika anda mendekatkan cursor anda pada icon facebook, maka akan muncul keterangan 'Profil on facebook' keterangan tersebut bisa anda edit sesuai keinginan.Langsung saja jika anda minat, ikuti langkah-langkah di bawah ini.

1. Login ke Blogger

2. PIlih template

3. Pilih Edit HTML

4. Cari kode </body> agar lebih mudah menggunakan Ctrl + F atau F3

5. Lalu copy kode di bawah ini, dan letakan tepat dibawah kode </body> 

<!--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> 

Keterangan:
1. Ganti # dengan url social media kalian.
2. Tulisan show: 8 merupakan, jumplah icon social media yang ingin anda tampilkan, misalnya jika anda ingin menampilan 4 icon saja, maka tulisanya menjadi show: 4,
3. Tulisan position: "left" merupakan letak widget icon anda, position: "left" berarti widget anda berada di kiri postingan anda. kalau anda ingin merubahnya ke kanan, ganti tulisan left dengan right
4. Anda bisa merubah warna tampilan widget dengan mengganti tulisan clear, clear berarti putih, dan dark berarti gelap, jika anda ingin merubah warna tampilan widget menjadi gelap. ubah tulisan clear menjadi dark

Artikel ini terinspirasi dari http://www.tuliskan.com/2013/03/cara-membuat-widget-social-media-melayang.html

Semoga Berhasil ^_^

Tag : Blog, Tutorial