Click below to view the demo
How To Create a Floating Social Media Bar with jquery effect in Blogger blog?
Just follow these steps:
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 src='http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js' type='text/javascript'/>
<script src='http://mybloggerlab.com/Scripts/mblsocialbar.js' type='text/javascript'/>
<div id='scolder'>
<script src=' http://my-project-tricksdonor.googlecode.com/files/Tricksdonor%20socialflipmin.js' type='text/javascript'/></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.
Subscribe to our mailing list to get the updates to your email inbox...
I like this blog u r just rockss buddy check here my website http://gaminghill.blogspot.in/
ReplyDelete