Adding Facebook Pop up Like Box in Blogger Blogspot

You might have seen some blogger are using a Facebook Pop Up widget. When you will open such blog, a Facebook Pop up will  cover the entire screen, and there will be a request to like their Facebook page.  Today i am going to share that Facebook Pop Up widget.Facebook pop up like box play a vital role in increasing your blog traffics. Though it will increase your page load time slightly, but it will generate more Likes to your Facebook page. So you will get more reader for your article. More reader means more traffic to your blog. This widget comes up with various feature.

This Facebook pop up widget uses Jquery, so when a visitor will open your website, it will automatically comes on the screen and request the visitor to like the Facebook page. If you are a newbie , than this widget can play a vital role in increasing your blog traffic. So today we will learn How To Add A Facebook Pop Up Widget to blogger template. The steps are very easy, go through it.

Add Facebook Pop Up Like Box To Blogger :

Follow these simple steps to make this widget yours.
 1. Go to blogger > Layout >
2.  Click on Add a Gadget > HTML/Javascript
3. Paste the below given code inside the  HTML/Javascript bosho
<style>/*    ColorBox Core Style:    The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /*
User Style:    Change the following styles to modify the appearance of ColorBox.  They are    ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000;opacity:0.5 !important;} #colorbox{         box-shadow:0 0 15px rgba(0,0,0,0.4);        -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);         -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);        }   #cboxTopLeft{width:14px; height:14px; background:url( no-repeat 0 0;} #cboxTopCenter{height:14px; background:url( repeat-x top left;}      #cboxTopRight{width:14px; height:14px; background:url( no-repeat -36px 0;}      #cboxBottomLeft{width:14px; height:43px; background:url( no-repeat 0 -32px;}      #cboxBottomCenter{height:43px; background:url( repeat-x bottom left;}      #cboxBottomRight{width:14px; height:43px; background:url( no-repeat -36px -32px;}      #cboxMiddleLeft{width:14px; background:url( repeat-y -175px 0;}      #cboxMiddleRight{width:14px; background:url( repeat-y -211px 0;}      #cboxContent{background:#fff; overflow:visible;}          #cboxLoadedContent{margin-bottom:5px;}          #cboxLoadingOverlay{background:url( no-repeat center center;}          #cboxLoadingGraphic{ no-repeat center center;}          #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}          #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}          #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url( no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}          #cboxPrevious{left:0px; background-position: -51px -25px;}          #cboxPrevious.hover{background-position:-51px 0px;}          #cboxNext{left:27px; background-position:-75px -25px;}          #cboxNext.hover{background-position:-75px 0px;}          #cboxClose{right:0; background-position:-100px -25px;}          #cboxClose.hover{background-position:-100px 0px;}          .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}          .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}          .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}          .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*———————————————————————————–*/ /*   Facebook Likebox popup For Blogger /*———————————————————————————–*/ #subscribe {     font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; } #subscribe a, #subscribe a:hover, #subscribe a:visited {     text-decoration:none; } .box-title {    color: #F66303;    font-size: 20px !important;    font-weight: bold;    margin: 10px 0; border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:10px; line-height:25px; font-family:arial !important; } .box-tagline {    color: #999;    margin: 0;    text-align: center; } #subs-container {     padding: 35px 0 30px 0;     position: relative; } a:link, a:visited { border:none; } .demo { display:none; } </style>
<script src=’’></script> <script src=””></script> <script type=”text/javascript”> jQuery(document).ready(function(){    if (document.cookie.indexOf(‘visited=true’) == -1) {        var fifteenDays = 1000*60*60*24*30;        var expires = new Date((new Date()).valueOf() + fifteenDays);        document.cookie = “visited=true;expires=” + expires.toUTCString();    $.colorbox({width:”400px”, inline:true, href:”#subscribe”});        } }); </script>     <!– This contains the hidden content for inline calls –>           <div style=’display:none’>    <div id=’subscribe’ style=’padding:10px; background:#fff;’>         <h3 class=”box-title”>Receive all updates via Facebook. Just Click the Like Button Below<center><p style=”line-height:3px;” >▼</p></center></h3>        <center><iframe src=”//;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:300px; height:258px;” allowtransparency=”true”></iframe></center> <p style=” float:right;  margin-right:35px;  font-size:9px;” >Powered By <a style=” font-size:9px; color:#3B78CD; text-decoration:none;” href=””>WP Blogger Widgets</a></p> </div> </div>
4. Replace the Red tech2mech With your Facebook Username.
5. Now save the widget. You are almost done. Here you need some customization to make this widget more   attractive.

Customize The Facebook Pop Up Like Box:

  • This code is so written that this widget will appear only Once in a month for each visitor who visits your blog first time.You can also see this widget after clearing your browser Data, History and Cache and revisiting your blog.
  • If you want to show this widget for each page refresh , then just delete the blue color “30” . But it is recommend that you should keep the widget as it is. Because Facebook Pop Up after each page refresh will irritate the visitor, and will create a negative impression on your blog.
  • The blue color text is the text which will be appear just above the Facebook Pop up like box  , You can change it to what so ever you like.
  • You have to replace the Red  seratune With your Facebook Username.

Add a Comment

Your email address will not be published. Required fields are marked *