Customized Recommendation Social Widget for Blogger

In this post im gonna explain how to add customized recommendation popup box for blogger. Actually this is just widget.You can add it to your blog easily. follow below steps.It includes Google plus, facebok and twitter counters.Go to below link for  demo.

bloggertrix

• LIVE DEMO

1. Login to Blogger > Dashborad
2. Click on Drop Down Menu and select Layout
3. Add a HTML/JavaScript Gadget
4. Paste below code in it.

<style type="text/css">#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKXKaivmM3Hpx005GP681uGkNTxlMCCJoyjZEDEZCV4dOjCjlyTTyVNLW83DZ9X-Y6fA4Rxuq20tdNuR4rWI_-xD3mB89GNSPXZFWsOqrXW6TINP6-mRsbr97dwNjSB56bdz1QAJQQ7SE/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div id="socialslide" style="display: none;"><a href="javascript:void(0);" onclick="return closesocialslide();" style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;">(X)</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don&#39;t forget to join our community!</span>
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/freebloggerthemes&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" style="border:none; overflow:hidden; width:80px; height:21px;"></iframe></div>
<div style="float:left; margin:15px;"><a class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-size="large" href="https://twitter.com/ClassyBlogger">Follow @BloggerTemplates</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>
<div class="clear">&nbsp;</div>

Replace All the red bolded lines with the required services.
Now save your HTML/Javascript'.You are done.

This is it. Now when you have the full code just copy it inside the gadget and save. You are done. If you liked this Customized Recommendation Social Widget for Blogger then please share it and write comments as your feedback.