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.
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!
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!
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
11 comments
Thanks, it works :)
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.
It's great ..... Way 2 go my friend :)
Although a v2 with share counts should be ur next priority
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.
Daring!! :D
yet.. another beautiful widget...
Blog: MoreBlogTools
Faizan Will Never Mind When Someone Copy His Article.
He Directly Use DMCA Without Warning :D
thanks for sharing this awesome widget.
this is really looking great.
cool, thanks buddy :D
not working try to reupload your js. its not working
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.