How to add 4in1 social network slide out widget in blogger?

4in1 slide out social share widget
4in1 slide out social share widget1
4in1 slide out social share widget2
  4in1 slide out social share widget44in1 slide out social share widget3
Before you have seen the facebook and twitter slide out like box and followers box respectively at my older posts. Today i am interesting post about all three social networking sites and one rss subscription email box in your blogger.so add this social 4in1 slide out widget for your blogger.
4in1 slide out social share widgetdemo

 

Add 4in1 social hover slide out for blogger

Part1
Login to blogger->> Template or Design->> Edit html
Tick at expand widget elements box
search for the code </head>
Add below code before </head>

<link href='https://modifymyblog.googlecode.com/svn/trunk/html/4in1.txt' 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'/>
<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>
save template.
Part2
Login to blogger->> Layout or page elements->>Add a gadget->> Html/java script
Add below code in html/java script box
<div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="http://1.bp.blogspot.com/-XyYjgghpO7A/TwqccHW47QI/AAAAAAAACSU/OvETkV56ui8/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FModifymyblogs%2F191755004247458&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;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://2.bp.blogspot.com/-7IkUBD3wuB0/Twqcbg9ZbZI/AAAAAAAACSQ/NFTv36TcJho/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter_right.png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("modifymyblogs");</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://2.bp.blogspot.com/-JLpoSgJD_BE/Twqcdf5jwYI/AAAAAAAACSg/MPBORcd7Sbs/s1600/%255Bwww.gj37765.blogspot.com%255Dgoogle_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://feeds.feedburner.com/modifymyblogs', '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 == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="Modifymyblogs" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="http://2.bp.blogspot.com/-00WPNGJANes/Twqcc-h41wI/AAAAAAAACSc/BLBwbXHIP3o/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png" /></div></div></div></div>
Change colored content facebook page url,Twitter username,Email subscription id
Save and you are done.

No comments:

Post a Comment

Please comment the message if you like post or any trouble