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.
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 MyBlogeffect. 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 MyBlogeffect. It’s our humble request!
0 comments:
Post a Comment