How To Create a Floating Social Media Bar in Blogger

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





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. 


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



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


From The Editor’s Desk:

Hope this Social Bar would help everyone in building their social audience. This bar might not work on such sites which are already using other Floating widgets i.e. Floating Older/Newer Posts and etc. What are your thoughts about the marvel widget? Take a lot care till then, Peace, blessings and happy floating.

Credits: This Widget is solely created by MBL Developers. Therefore, While Sharing this tutorial/widget with your followers do not forget to give a Credit back link to MyBloggerLab. It’s our humble request!
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

11 comments

January 2, 2013 at 6:30 PM

Thanks, it works :)

January 3, 2013 at 4:52 AM

true nice widget. Please tell me how can i optimize seo. I m really working hard but i never find traffic increase. I do everything as stated on mbl. Made meta tags, verified authorship, wrote quality content and everything!

Please brother tell me. Please optimize seo for my site. I know thats tough, i can't pay u coz i m 13. That sounds different but its true. I would, in return, post/give you quality articles to post on MBL without any branding.

January 3, 2013 at 5:41 PM

It's great ..... Way 2 go my friend :)
Although a v2 with share counts should be ur next priority

January 3, 2013 at 6:56 PM

Hey Faizan, i copied this article with URL http://d-copy.blogspot.com/2013/01/social-media-bar-melayang-untuk-blogger.html.

If u dont like u can protest Man.
Thanks.

January 4, 2013 at 3:09 AM

Daring!! :D

January 4, 2013 at 10:23 AM

yet.. another beautiful widget...

Blog: MoreBlogTools

January 4, 2013 at 11:48 AM

Faizan Will Never Mind When Someone Copy His Article.
He Directly Use DMCA Without Warning :D

January 6, 2013 at 8:00 AM

thanks for sharing this awesome widget.
this is really looking great.

June 8, 2013 at 6:50 AM

cool, thanks buddy :D

October 7, 2013 at 10:13 PM

not working try to reupload your js. its not working

Editorial Team MOD
October 14, 2013 at 5:26 PM

Working fine on the demo Sir

http://damlol.blogspot.com/

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.