Elegant Style Scroll Down Social Media Widget For Blogger

For getting recognized and popular impact of your brand over social media is very much necessary. Number of followers and likes are the figures which decides the quality of your brand name. More the likes more respect and loyalty your brand will earn from peoples.

That is why integrating your brand with social media is always recommended by all the marketing experts. And there are lot of social media widgets which help you to grow your audience and followers by asking them to follow you.

Today we are adding one more social media widget for blogger in that lists. This widget includes Google+ and Facebook follow button, which becomes visible on scrolling down the page of your site. Hope You will like it.

More Social Widgets for You

1. Have You Installed Trackers Social Sharing Widget In Blogger?
2. Social Media Sharing Widget V2 for Blogger

Step#1

• Open Blogger Dashboard → Template → Html Editor 
• And search for (pressing Ctrl+F)  <footer> or <div id="footer"> 
• Add below given code just above it.
• After adding it replace the highlighted ID with your own user ID name.

HTML & jQuery

<script>
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1500) {
$('#scrollwig').fadeIn();} 
else {
$('#scrollwig').fadeOut();
  }
});
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="scrollwig" class="sliderbox_06" style="display:none;right: 0px; bottom: 0px;">
<div id="scroll_content">
<div id="follow">
<div class="text">
<p class="para1">Follow Us On</p>
<p class='para2'><span class='googlefollow'>Google+</span> &amp; <span class='fbfollow'>Facebook</span></p>
<br/>
</div>
<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/104531871024048224811" 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>
<!-- Fb Button -->
<div class='fb' style='float:right;position:relative;right:-10px'>
<iframe src="//www.facebook.com/plugins/follow.php?href=http%3A%2F%2Fwww.facebook.com%2Ftrackmyblog&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 href="http://www.trackmyblog.com/2013/11/wikihow-style-social-media-widget-for-blogger" id='getwidget'>Get The widget</a>
</div> 
<!-- End slider-thanks_06 -->
</div>
</div>
</b:if>
<div class='clr'/>

Step#2

• Now Search for (pressing Ctrl+F) ]]></b:skin>
• And copy-paste below CSS property for the widget just above it.

Css

/* Trackmyblog.com Scroll Down Widget 
*****************/
#scrollwig {
position: fixed;
right: -510px;
z-index: 4;
opacity:0.99;
width: 275px;
bottom: -300px;
}
#getwidget {
float: right;
font-size: .65rem;
color: #323232;
position: absolute;
right: 85px;
bottom: 0px;
}
#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}
.para1 {
font-size: 1.9rem;
font-weight: normal;
font-family: oswald;
padding-bottom: 0.1em;
margin: 0 0 0 0;
letter-spacing: 1px;
color: #47401A;
}
.para2 {
width: 120%;
margin: 0 0 0 -9%;
font-size: .8rem;
}
.fbfollow {
color: #3B5998;
font-size:1.3rem;
font-weight:bold
}
.googlefollow {
color: #D34836;
font-size:1.3rem;
font-weight:bold
}

Now hit the Save button and you are done. Congratulations you have successfully added scroll down social media widget.

Final Words

Friends we have created this widget under Creative Commons Attribution License 3.0, so you can share it anywhere either on your site or any social media platform but you don't have right to remove the credit link in the widget. If you're sharing our widget on your site then you'll have to give proper credit to us with a backlink.