Customized Recommendation Social Widget for Your Blogger Blog

Social media widgets are considered as a great way to increase social followers and loyal traffic to your blog. In this post I’ll be going to share a tutorial to add social widget to your blog that will help you to increase the number of social followers of your blog. It is a kind of pop up form that recommend your readers to follow you on Google plus, Twitter and Facebook. Add this Customized Recommendation Social Widget to your blog easily by following the tutorial given below.

1. Log in to your Blogger blog and click drop down.

2. Click on the layout option.

3. Now, click on ‘Add Gadget’ and select ‘HTML/Javascript'.

4. Copy the code given below and paste it in the Gadget box.

<style>
#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGEzeVitMp5SUA_8nK_2pEIZ4TG98rgpToGELcSXmpqmLLjCcc-X5GU00QqBVLoQsxoF6eoWPAk2UYpCsaVxgrsf3Damb3a4HzXzNpDc0qZdZIENP4R6epGd-Y4i4AKylZnV2Sz-irC5Cv/s1600/optin-header-tile-copy.png) left top repeat-x;
border-radius: 8px;
-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 style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fsmartbloggertricks&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" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>
<div style="float:left; margin:15px;"><a href="https://twitter.com/TechSBT" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @TechSBT</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'></div>

5. Save the HTML/Javascript.

That’s it, you are done with the procedure of adding recommendation social widget to your blog.