Add 4 In 1 Social Sharing Slider Widget For Blogger

Posted by : ADMIN Monday 28 May 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 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 Vist er feel impressed. So what are you waiting for !!! Lets start with very easy installation.

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>

4 Now click on Save Templet

5 go to design > page element > Add html java Script box And paste this code

<div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src=" http://4.bp.blogspot.com/-Bxols98zkzc/T3B6vLQS5XI/AAAAAAAAARs/RDWnvgpx0S0/s1600/bloggertricksdotbiz(facebook+right).png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=fanpageurl&locale=en_gb&width=200&connections=9&stream=&header=false&show_faces=0&height=356" scrolling="no">
</iframe>
</div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src=" http://1.bp.blogspot.com/-JBR8bQ1dKWM/T3B7lUqhNNI/AAAAAAAAASE/Ct8U3SSBykA/s1600/bloggertricksdotbiz(twitter+right).png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("twitterusername");</script>
</div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src=" http://1.bp.blogspot.com/-_Hpf3EgcKG4/T3B6zwlAfuI/AAAAAAAAAR0/BXL-Qc-gfpU/s1600/bloggertricksdotbiz(google+plus+right).png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone>
</div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#f66303;">you can also receive free email updates:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=feedname', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="enter your email here..." onblur="if (this.value == '') {this.value = 'enter your email here...';}" onfocus="if (this.value == 'enter your email here...') {this.value = '';}" type="text" /><input value="co/YpkX" name="uri" type="hidden" /><input value="submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src=" http://4.bp.blogspot.com/-SHh1PQioyv4/T3B63t0CieI/AAAAAAAAAR8/n0Mdrf3Q8xo/s1600/bloggertricksdotbiz(subscribe+right).png " /></div></div></div></div>

6 change highlight fides And save

PLEASE COMMENT.........