If you have content and want to publish on my website as guest post go here
Home
blogger widgets

3 Best Facebook Popup Like Box For Blogger V2.3

Well here i am making a Facebook like popup box for blogger which is also nice to install.When you install it it and when someone visit you any blog page it will display on the front which ask you to like the page and its very simple and clean.

Facebook Popup Like Box


Here is screenshot of this widget

=========== #1 ==============



You have to do these steps to install it on your blogger blog

          1.  Go to blogger dashboard  >  Layout
          2.  Now click on  >  Add a gadget
          3.  A box will appear select  >  HTML/Java Script box by scrolling until you find it
          4.  Now paste this code into the box and click on  >  Save


  [ <!-- Widget by www.mbgadget.blogspot.com start --><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css" /><script>$(function() { $( "#dialog" ).dialog(); }); </script>  <div id="dialog" title="Get updates via Facebook">
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fmbgadget&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=true&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:258px;" allowtransparency="true"></iframe></center>
<center style="float:right; margin-right:10px;">
 <!-- Please don't remove credit --><span style="font-size:xx-small; color:#000; text-decoration:none;">Get this gadget at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://www.mbgadget.com/2013/04/blogger-facebook-popup.html" rel="nofollow">facebook popup like box</a></center>
</div>
<!-- Widget by www.mbgadget.blogspot.com End -->]


  • [message]
    • Settings
      • Remember, At end of this code you will find mbgadget  words replace it with your own fb like page username.


Here is another Floating facebook like box for blogger check it out

=========== #2 ==============

So this new gadget looks like this


[<style><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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIn5Y_lkHP4tMfjokkleUXKW_KdyP8OSiNmY8MLi3_f4NAORpOpnyCWJKVObC_4Wmu_pDbAYBHMLUv13dngLinBeE5H6MyN5O7GAnZzdV0AM-nxeKO6-JImEdgxqZ4KDNjV47E140ESSAp/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEaLHVo-KQcuueYOB050Z6W8I-dy4rRIGqa2pgYPnhZngi_XteiFHWzAQiNH5xDiW9EVWkXn6528hqTatnblkz2rDj8_xjmydCuw0H2-XeDcQrhG2OoXBCWYsP7Vah8CazfmTG8fK0H3Dd/s1600/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIn5Y_lkHP4tMfjokkleUXKW_KdyP8OSiNmY8MLi3_f4NAORpOpnyCWJKVObC_4Wmu_pDbAYBHMLUv13dngLinBeE5H6MyN5O7GAnZzdV0AM-nxeKO6-JImEdgxqZ4KDNjV47E140ESSAp/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIn5Y_lkHP4tMfjokkleUXKW_KdyP8OSiNmY8MLi3_f4NAORpOpnyCWJKVObC_4Wmu_pDbAYBHMLUv13dngLinBeE5H6MyN5O7GAnZzdV0AM-nxeKO6-JImEdgxqZ4KDNjV47E140ESSAp/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEaLHVo-KQcuueYOB050Z6W8I-dy4rRIGqa2pgYPnhZngi_XteiFHWzAQiNH5xDiW9EVWkXn6528hqTatnblkz2rDj8_xjmydCuw0H2-XeDcQrhG2OoXBCWYsP7Vah8CazfmTG8fK0H3Dd/s1600/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIn5Y_lkHP4tMfjokkleUXKW_KdyP8OSiNmY8MLi3_f4NAORpOpnyCWJKVObC_4Wmu_pDbAYBHMLUv13dngLinBeE5H6MyN5O7GAnZzdV0AM-nxeKO6-JImEdgxqZ4KDNjV47E140ESSAp/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIn5Y_lkHP4tMfjokkleUXKW_KdyP8OSiNmY8MLi3_f4NAORpOpnyCWJKVObC_4Wmu_pDbAYBHMLUv13dngLinBeE5H6MyN5O7GAnZzdV0AM-nxeKO6-JImEdgxqZ4KDNjV47E140ESSAp/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIn5Y_lkHP4tMfjokkleUXKW_KdyP8OSiNmY8MLi3_f4NAORpOpnyCWJKVObC_4Wmu_pDbAYBHMLUv13dngLinBeE5H6MyN5O7GAnZzdV0AM-nxeKO6-JImEdgxqZ4KDNjV47E140ESSAp/s1600/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRoui4EK-x6ZANXrt7iH24gVX7rNxsPyEvHbrtCLwJDi17UCIecnDdT_ffKm-MhhYhY5WgaBvbPeJ4B40P_evnIOAa_ztNwyoztqnJFSaSdBoJvFv0khNU-zoK7kyMH5Xzi87fmggSBiOw/s1600/loading-background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXxexGI-PLDf-qbO9T4jcRL_obmppmybB4KTwKB_mNw6IRleHKdBp0ch8KyX2MjMZdCcacRF2f5FSV3Tq1xLAYBSwqr-4aT6btYIs0r9g7rymE1m-F3gD8Ta3V5Y246GwuI7tIiq23nT8r/s1600/loading.gif) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIn5Y_lkHP4tMfjokkleUXKW_KdyP8OSiNmY8MLi3_f4NAORpOpnyCWJKVObC_4Wmu_pDbAYBHMLUv13dngLinBeE5H6MyN5O7GAnZzdV0AM-nxeKO6-JImEdgxqZ4KDNjV47E140ESSAp/s1600/controls.png) 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: #3B5998; 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='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>    <script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></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;'>
  <center>
 <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmbgadget&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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="http://www.mbgadget.com/" rel="nofollow">Blog Gadgets</a></p>
</div>
</div>
]
  • [message]
    • Settings
      • So you have to remember in this code you have to find mbgadget and replace it with your Facebook username.


Here is the more info about this box:
  • Easy to install
  • Beautiful style
  • Attract more attention to like
  • Best way to increase FB likes
Now i am explaining the every part of this widget which is only for blogger blog. so here it is,

  • Easy to install

If we look that this box is very easy to install on any kind of blogger blogs, you just have to copy the code and paste it into the HTML gadget to the inside section of blog.
Its not very difficult to do so, You don't need to edit any type of template code to add this gadget it very easy to install.

  • Style

Well while looking at the structure of the box then this box is more better then ever. Its very simple and clean you can easily understand that what type of this box is, Its normal display the like button of your facebook page it bring more likes.

  • Attract Attention

This widget bring attention to your facebook fan page to like it and get updates from the fan page, if your blog is better and bring much better results and traffic then its good for you to add it up.

  • Best way to increase likes

As i think this is one of the most powerful way to increase your fan page likes, if you have a little blog on blogger then you have to add this on your blog, its really boost your likes of fan page. Its simple work that, a visitor come to your website because of your brilliant content and if he really impress then he like your page.

Enjoy