Adding 4 in 1 Social Sharing Widget on Blogger
Wednesday, July 11, 2012
Social
networks and social sharing is one of the major traffic source for
every bloggers. Some of social networks like Facebook, Twitter, Google
plus, Etc . , which have milions of users can boost your blog traffic to
an unimaginary level. Social networks are really playing an elegant
part in bringing traffic to each and every blogs and websites. Sharing
on social network can definitely bring a lot of change in your blog's
popularity and rank. For this SEO tactic you need to impress your blog
visitors with something special on your blog and In this tutorial , i am
going to guide you on how to add a 4 in 1 beautiful social sharing
widget on your blogger blog and make your blog visitors feel impressed.
So what are you waiting for !!! Lets start with very easy installation.
Follow These Simple Steps For Adding 4 in 1 Social Sharing Widget on Your Blogger Blog now::
1. Go To Your Blogger dashboard --> Design --> Edit Html (Tick the expand widget option).
2. Now Find(Ctrl+F) The Below Code.
</head>
3. Add the below code just above the </head>.
<link href='https://blognpctricks.googlecode.com/svn/css/4in1widgetv2.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript' type='text/javascript'/>
<script src='http://makingdifferent.googlecode.com/files/fanbox_init.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript' type='text/javascript'/>
<script src='http://makingdifferent.googlecode.com/files/fanbox_init.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });
</script>
4. Fill your Facebook Page Address, Twitter username and Feedburner address in the box below.
5. Click on Generate and click on Add To Blogger.A new window opens, then select your blog and click on Add widget button.
5. Click on Generate and click on Add To Blogger.A new window opens, then select your blog and click on Add widget button.
Note:
Please Login to your blogger account first in a new tab and then click
on Add to blogger button here, because i found that it wont working if
you login after choosing Add to Blogger button.
