How To Create a Floating Social Media Bar in Blogger

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 (Spark) to attain same traffic from it. The Ideal way of getting some social exposure is to convert your daily visitors into social Followers. Now the problem is that, how we should convert them into our Social Follower? The answer is pretty straightforward we can utilize some Social networking widgets that could guide visitors to the different Social platforms i.e. Facebook, Twitter, YouTube, Google+ and etc. For that reason, we have created yet another widget for Social Media Lovers. Today, in this article, we will be Learning How to Create a Social Media Bar in Blogger?

Floating Social Media Bar (DEMO)

What is 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. Consider the Following screenshot and enjoy the live action.

Where Social Media Bar Would Appear?

It is extremely flexible, and we can place it either on the Left Side, Right Side, and Top or even down a page. Since, we have used a jQuery. Therefore, we have to use few commands like “bottom”, “top”, “left” and “right” to display it on different parts of our website. To clear your misconception considers the following screen.

How To Add Social Media Bar Widget in Blogger?

Many of our readers were complaining that we always share long tail tutorials. Therefore, from now one we would try our finest to complete the Widget Installation in just one step. Consider the following instructions.

Go To Blogger.com >> Template >> Edit HTML >> Proceed.

In the template search for </body> and just above it paste the following Coding. Don’t change the coding otherwise it would stop working. If anyone is unable to find the </body> tag, then he can paste the coding just below <body> tag.

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


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

Adding URL: Replace All # with your URLs According to the desire needs.

Change Positions: In order to change the position of the widget Replace “Left” to Either “right”, “top” or “bottom” from the coding according to your desire needs. Remember: Don't use Capital Letters otherwise it would stop working.

Display Less Social Site: In order to Display Less Social Sites just Replace “8” with less numbers i.e. 7, 6, 5 and it would show less buttons. However, it would start displaying an Arrow that would allow visitors to get access to the Hidden sites.

Change Skins: We have added two Themes to this Social Media Bar i.e. “clear” and “dark”. To Change the current “clear” theme to dark just replace clear to Dark from the JavaScript coding.

All Done: After customizing everything according to the desire needs, then save the template by pressing “Save Template” button. Go visit your site and we are sure it would not let your site’s look down. Don’t forget to leave your suggestions.

Pages

Monday, 7 January 2013