Amazing 'wikihow' Styled Social Media Widget

It is always nice to build up a strong social media presence for your blog. Using your readers for that can be easily achieved through some well designed social media and share widgets in your blog.

I've previously shared many social sharing widget for blogger like the horizontally floating social share, expandable social share widget and many. You can easily get to more of them by using the search bar.

And here is another one into the list. It's not a social share widget, but social media widget that'll have follow buttons for your Facebook and Google+ pages. The widget will be visible at the corner end of your blog when the reader scrolls down the page. And is designed differently to be eye catching. And you'll love it work on your blog.

How to Add this Awesome Social Media Widget to your Blog

✔ Firstly navigate to Blogger > Template > Edit HTML

✔ Now search and find any of these codes <footer> or <div id="footer"> 

✔ Now just above it past the following code

<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="http//plus.google.com/+SarathRaju360" 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%2Fbloggslab&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.bloggslab.com/" id='getwidget'>Get The widget</a>
</div>
<!-- End slider-thanks_06 -->
</div>
</div>
</b:if>
<div class='clr'/>

Note: Replace the highlighted codes with your Google+ and Facebook page's id respectively.

✔ Now search and find ]]></b:skin> and paste the following code just above it,

/* 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
}

✔ That was it. Now save the changes and you can see the widget working on your blog.