Elegant And Stylish On Scroll Down Social Sharing Widget For Blogger - Wikihow Style

About The Widget

The day I saw this widget on wikihow I became a fan of it.I always dreamt of having it on my website and now because I have this on my website I am sharing this tutorial to you so that it might not become and hard task for you to write a lengthy code for getting this widget.This widget also doesn't increases blog loading time and is really very attractive.Demo you can see on this blog by scrolling down to the comments.

Steps To Add It:-

• Go to Template Tab Of Your blog
• Click On Edit HTML button
• Search For <footer> or <div id="footer"> or <div id='footer'>
• Add the following set of codes above it:-

<!--Elegant And Stylish On Scroll Social Sharing Widget by http://technopcarea.blogspot.com/ Starts-->           <script>
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1500) {
$('#technopcareaslider1').fadeIn();}
else {
$('#technopcareaslider1').fadeOut();
  }
});
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><!--Remove this if you want the widget to appear on the homepage also-->
<div id="technopcareaslider1" class="technopcarea_slider1" style="display:none;right: 0px; bottom: 0px;">
<div id="technopcarea_scroll_content">
<div id="follow">
<div class="text">
<p class="paragraph1">Follow Us On</p>
<p class='paragraph2'><span class='googlefollowbutton'>Google+</span> &amp; <span class='facebookfollowbutton'>Facebook</span></p>
<br/>
</div>
<!--Google+ Button Starts-->
<div class='g+' style='position:relative;left:5px;float:left'>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="//plus.google.com/your-google-plus-id" data-rel="publisher"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<!--Google+ Button Ends-->
<!-- Facebook Button Starts -->
<div class='technopcareafb' style='float:right;position:relative;right:-10px'>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fyour-facebook-page-url&amp;width&amp;height=65&amp;colorscheme=light&amp;layout=box_count&amp;show_faces=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden;width:70px; height:65px;" allowTransparency="true"></iframe>
</div>
<a id='dontremove' href='http://technopcarea.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNAdKeCm0UixFtd1uhT11VxjqJWqrjgBMVhNwGI5HdecWuJeMxINSfZPWuo9_U0zNL9A1_pi_cXIRkoVZXqpC4XK1-RH6g_OOjAmAOvf3fd2WTUR8TuqteNnbPaAG0pFsIdxTAiNM8k24/s194-p-no/' alt='credit' title='credit' height='1px' width='1px' /></a>
</div>
<!-- End Facebook button -->
</div>
</div>
</b:if><!--Remove this if you want the widget to appear on the homepage also-->
<div class='clr'/>
<!--Elegant And Stylish On Scroll Social Sharing Widget by http://technopcarea.blogspot.com/ End-->

• Now search for </head> tag of your html and add the following set of codes above it:-

#technopcareaslider1 {
position: fixed;
right: -510px;
z-index: 4;
opacity:0.99;
width: 275px;
bottom: -300px;
}
#technopcarea_scroll_content{
border: 5px solid #FFF;
border-radius: 150px 150px 0 150px;
box-shadow: -3px 3px 4px #BFBFBF;
margin-bottom: 0;
}
#follow {
background-color: #FFF;
border:15px groove #F8DA39;
border-right: none;
border-bottom: none;
border-radius: 150px 150px 0 150px;
font-size: 0.9em;
height: 185px;
margin-bottom: 0;
padding: 40px;
text-align: center;
}
.text{margin:0 0 0 0}
.paragraph1 {
font-size: 1.9rem;
font-weight: normal;
font-family: oswald;
padding-bottom: 0.1em;
margin: 0 0 0 0;
letter-spacing: 1px;
color: #47401A;
}
.paragraph2 {
width: 120%;
margin: 0 0 0 -9%;
font-size: .8rem;
}
.facebookfollowbutton {
color: #3B5998;
font-size:1.3rem;
font-weight:bold
}
.googlefollowbutton {
color: #D34836;
font-size:1.3rem;
font-weight:bold
}

• Now replace highlighted text with your own google+ and facebook page url's

Final Words

This widgets's not the copy of the widget on wikihow.It's completely different and highly edited and self-made widget so this is not an copyright of the code.If you want to place this code on your blog than don't remove the credit for preventing and problem related to redirection of your blog to our's.