Header Ads

Breaking News
recent

How To Create a Floating Social Media Bar in Blogger 2016

Hello Guys! There is no doubt that, from years Social Media has proven to be the most prominent source of Traffic for many websites. However, that does not mean each and every website has the charisma to attain same traffic from it. The Ideal way of getting some social exposure is to convert your daily visitors into social Followers. For that reason, Today I gonna going to show you How to Create a Social Media Bar in Blogger?



Let Start it below:

About Social Media Bar:


It is a widget that has eight most popular Social Networking platforms which appears in a form of a Bar. It floats along your screen. Whenever, a visitor would scroll up or down a page it would float along him. There is no rocket science behind this widget because everything is done with the help of modest jQuery. You can place it on any place left, right, top or bottom. See its Demo Below:

How To Add a Floating Social Media Bar in Blogger?

1.Go to Blogger Dashboard>>Template.
2.Then Click on Edit HTML and search for </body> tag.
3.Paste the below code just above it.


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

Note:The above script was originally created by my blogger lab.We are just re-sharing it.


4.Now replace all # with your Social media link.

And thats all done!!!!!

I hope that after reading this article you easily Create a Floating Social Media Bar in Blogger.If you like this article share it on social media to help other blogger friends.

Let me know you if you have any problem regarding to this article.If you have any problem you can ask me in comment box.Thanks for reading this article.Stay tuned for more lectures.

No comments:

Powered by Blogger.