Add bottom scrolling popup subscription box to blogger

        Hi bloggers , this is pop up social subscription box which is contain facebook and twitter page like button.This widget is smoothly slide out when the page gets scroll down.In past this widget is used to show related posts.You can also edit this widget for add more subscription buttons by simple modification, If you can't simply comment below I'll explain.These widget is adapted from wordpress.This widget is designed for open at right side, if you have already installed any widget at right side you can simply edit it for open at left side.

Live Demo

Installation method

• First copy below code and paste it to notepad.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> &nbsp; <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script> 
<style type='text/css'>
#IGsocialslide{
background:#f3f3f3;
border-radius:9px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow:inset 0 0 4px #333;
-webkit-box-shadow:inset 0 0 4px #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>
  <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">(X)</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />   <div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggerwhist&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&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/bloggerwhist" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</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>

• Now replace bloggerwhist with your facebook page name and https://twitter.com/bloggerwhist with your twitter page id.
• Then go to your blogger dashboard and select layout tab. 
• click add gadget and select HTML JAVA SCRIPT gadget.
• Now paste your code into the gadget and save.

Modification

                       If you want  open this widget at left side, simply change right:2px; with left:2px;

If you like this post share it

Tweet

Get free daily email updates!

Follow us!

Posted in: animated widgets,blogger widgets,bloggertricks