Add Popup Don�t Forget To Join Our Community widget for blogger

Spicing blog or website by adding social sharing button type widgets or attractive widget may have lots of chances to get more subscribers. If any new reader landing on your blog or website, this scrolling type widget drag their attention forcibly click to subscribe for Social networking sites Facebook, Twitter. This widget is specially designed with popup enabled, available in customizable colors, smooth scroll page down appearance. Popup widget won�t disturb your subscribers or readers only it appear or popup when readers scrolls down for more posts. Webmasters don�t have to work hard for installing this widget, BlogTariff presents two type of floating popup widget i.e left and right side as per requirement of website. Let�s begin the tutorial to install popup widget for blogger.

For Demo (Scroll Down for more posts)

You may also like related posts
How to Add Popup Text and Image Boxes to Blogger?
How to Add Popup/Floating Ads widget for Blogger?
How to Add Time Control Popup Facebook Like Box widget?
How to Add Free Email Updates Popup Widget for Blogger?

Sign in to your blogger account
Select �Layout�
Click on �Add a Gadget� and Select �HTML/Javascript� widget and paste the below code and save

Left side floating Popup widget script for blogger

<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)$("#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/AVvXsEhxfyYjnKhT5Gn-xTj4YW5cyjb0MQBOj7Dfck6KGLHPIFjhSGIQsI69_GdOnwHPC_V42RvhNHQCsHvIP8TCd1TutQoZ4lQI5pa9lpe2q4Zb4M7EG9LUXDksx0bn1wBvHen6NRQyvk1x44GF/s760/Blogtariffcom_blue.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%2FBlogTariff&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/blogtariff" 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>

Right side floating Popup widget script for blogger

<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)$("#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/AVvXsEhxfyYjnKhT5Gn-xTj4YW5cyjb0MQBOj7Dfck6KGLHPIFjhSGIQsI69_GdOnwHPC_V42RvhNHQCsHvIP8TCd1TutQoZ4lQI5pa9lpe2q4Zb4M7EG9LUXDksx0bn1wBvHen6NRQyvk1x44GF/s760/Blogtariffcom_blue.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; 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:#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%2FBlogTariff&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/BlogTariff" 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>

Widget Customization:-
Change the facebook page URL with your link as highlighted in Blue color
Change the Twitter account URL with your link as highlighted in Red color
Change the widget color background as highlighted in pink color with the given below image links

Blue

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxfyYjnKhT5Gn-xTj4YW5cyjb0MQBOj7Dfck6KGLHPIFjhSGIQsI69_GdOnwHPC_V42RvhNHQCsHvIP8TCd1TutQoZ4lQI5pa9lpe2q4Zb4M7EG9LUXDksx0bn1wBvHen6NRQyvk1x44GF/s760/Blogtariffcom_blue.png
Brown

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOmv78z5UucLDNCapq_UXhnPgiux4UfY3mU47oTHKO7GDAdhGZGcH1yaQjJsNI4ep8wtZwQ2TvBaoTAEHebRia7RuT13-Ui_cbLNlqbP9DworiroIdmoh_f-XWwOp_QYewHFxjVFVQF45W/s760/Blogtariffcom_Broun.png
Green

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgntCmXTqXIDxzYGLsXv_hZixsCHKvz3k64GkTC3xTBaHIf4ms3lGwUbztu0qDKypMiX9pewncBogZrVMHTluG-9tZxh4sc_0VzggfwwJVopRKAk1fAHPlE7MV9PLct_QXpYAm6zNiBB3zi/s760/Blogtariffcom_Green.png
Orange

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPe3FoKIsydxrbeIto71PuSCdCCKbdmZp6jxm_WKp7ltxxBwiFdCrlNLbZ7CrZ1B3qN1COTb7Ji_P0bFkFApT60B4ERVtlSg0zJkaGdjM9Ls76zGHCSkv5WJ6HuTNJqRyUJ7HvG-MzPe9G/s760/Blogtariffcom_Orange.png
Ash
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OwMTTleQsxI7sAFdVy3f6B-nBXF5pNzqxmztvSAbMNANu_ooJqV9FVZKDpWdj_x7ws_CFQM-0U_YxAtPMFT_FqCL_At96pgC4qVRLC3aOqNJAL4QM5ooLbMNmRr_SRI-XcpZw7tYkUw/s960/blogtariffcom_ash.jpg
Pink
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUEbpfp3yphtUcxsgFsZKbX1RMhiwUPkY8qXIM0vrNnBRFtTILBFj_xFSARDUVQSIkg2EeciSModCVm3bABI95jJ-mvsbgJIOuCPj6Sw72R06V2jirHw_z6dMF0F84Lrg7RjRV9LWpbSk/s960/blogtariffcom_pink.jpg
Red

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkCRmbuJ3mmR16iu7gDjRRDYKsDdZ52wSmXjnZJKWtw_RrihNJJ2E6lSLhSc1B1dSByEKp6R7o7shQX8ooDfDle-CvF2vNYcE4vWyN6Gxeci7cva5YTYkFq3veKa5fWPF9caoytrTeAKiB/s760/Blogtariffcom_Red.png

Add Popup Don�t Forget To Join Our Community widget for blogger

Share this

Related Posts