Don't Forget To Join Our Community Popup Widget for Blogger

                                    

After a long break Today I come up with my another awesome wordpress style blogger widget named "Don't forget to join our community". Many reader ask me to provide this widget so I'm sharing this widget with all of you. Its a popup social subscription box which contain facebook like & twitter follow button. This widget is come out smoothly  when you scroll page down. I created a widget generator for easy modification & Installation. you can choose 5 different colors of this widget through below widget generator. Also you can see a working demo on CrcaksTrick if you scroll page down.

So without wasting a time lets add this beautiful popup widget to you blog/website.
How To Add This Widget To Blogger?

    1. Make Some Customization in below widget generator
    2. Click Generate Button
    3. Now Click ADD TO BLOGGER to add this widget on your

CODE  

<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:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Th1MlfMMLBsDk0kSCfWugwxVDNyXEIUZut2qTyvWCamO_ahkLPhCfaFEZtzR3yfvl44kW60t3dFcLnZF8SHCBeJ_hbC87UtJMif8Y-2fxuJ8wMDxi3vYCdEfcnExansfcejMwhCtkKA/s1600/NBT_Red.png) left top repeat-x;  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;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;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 #868686;color:#F8F0F0;">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%2Ffacebook.com/crackstrick&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/twitter.com/CracksTrick" 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>  </div>  <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:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Th1MlfMMLBsDk0kSCfWugwxVDNyXEIUZut2qTyvWCamO_ahkLPhCfaFEZtzR3yfvl44kW60t3dFcLnZF8SHCBeJ_hbC87UtJMif8Y-2fxuJ8wMDxi3vYCdEfcnExansfcejMwhCtkKA/s1600/NBT_Red.png) left top repeat-x;  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;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;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 #868686;color:#F8F0F0;">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%2Fhttps://www.facebook.com/crackstrick&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/twitter.com/CracksTrick" 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>  </div>  <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:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Th1MlfMMLBsDk0kSCfWugwxVDNyXEIUZut2qTyvWCamO_ahkLPhCfaFEZtzR3yfvl44kW60t3dFcLnZF8SHCBeJ_hbC87UtJMif8Y-2fxuJ8wMDxi3vYCdEfcnExansfcejMwhCtkKA/s1600/NBT_Red.png) left top repeat-x;  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;  left:2px;  display:none;  z-index:3;  height:65px;}  </style>    <div style="display: none;" id="IGsocialslide"> <a style="position:absolute;top:14px;right:10px;color:#D8C9C9;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 #868686;color:#F8F0F0;">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%2FYour Facebook Page Url&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/Your Twitter Username" 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>  </div>

How To Add This Gadget To Blogger?

• 1. In The Code Replace my Red colored User name with your's
• 2. Don't make any other changes
• 3. Now Go to Blogger Layout and click on "Add A Gadget"  
• 4. In  "Add A Gadget"  select "HTML/JavaScript "
• 5. Now paste the code to the content area provided in it
• 6. Click save
• 7. That's Done! Now view your blog