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.
Add 4in1 social hover slide out for blogger
Part1Login 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.<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>
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0Elygfy2ByGbMgsoasmBGH74CDM649FaM6a6RDME-8SH8uO0U6OtUZBtE4EGhSGXNBTnmpv2HASYPkMyc40v6XUunPKnpmFhR2kCA0DzseUWhaR419cxJDKpJd8AU2rJMXryZUvR81Re/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&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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzCfLaAAZ4X6eA93XG6x1IwYe5hRA9diTgLmjZQcB2x81K1JiCE1_SE2cYKp3vHe8FOnsVlwu3skplQFspKjpUEU6WzavXbbxCY25iczAVe5Up2-w4WTc5lCBk2SpGFweZxShni8OWrb0A/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh-4WSIdWSgklOAXmsbgSANoeSh-e4XGkfe0ufH2DSjwY4nSqXY6FqeXrwzBUtTGyCT2XnarNJPbcBQVHO90Ennt7Ru-2f8Xtx0CZj3QtqxwuHaEdtik2o4RDxlh7jBnWVaeu1CPn5NuJi/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 == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="Modifymyblogs" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAMRkkjjm49YPGCTo6sY9oY0IoAcpZ03BIH2rxVZ0xfyacN-Pvx_UnIxSy62xkUFHp6cfJlz69XBtIMAHoNHrobkbKLIo4TyMmotYzaTxgtE5v5NKmk9wfJJ_3WxUuw-7v35xm52BmoNy-/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.