Facebook popout Like Box widget for bloger Latest (jQuery)

As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.
If not add the below snippet code before </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

Follow this steps

• Go TO blogger Dashboard
• Click on Layout
• click on Add Gadget
• Add HTML/JavaScript gadget(click + sign in front of gadget)
• in Content section paste following code , leave title blank

<span style="font-family: Consolas, Courier New, Courier, mono, serif; font-size: x-small;"><b><div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> <!-- jquery popup facebook like box with timer by Making Different @ www.gj37765.blogspot.com --></div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> <style type='text/css'></div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> #makingdifferentpopup{</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> position: fixed;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> top:100px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> z-index:9999;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> display:none;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> padding:0px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> right:600px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> border:10px solid rgba(82, 82, 82, 0.7);</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> -webkit-background-clip: padding-box; /* for Safari */</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> -webkit-border-radius:8px 8px 8px 8px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> -moz-border-radius:8px 8px 8px 8px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> border-radius:8px 8px 8px 8px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> width:400px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> height:360px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> overflow:hidden;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> #makingdifferentpopup span{</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font-size:20px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font-weight:bold !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> #makingdifferentpopup h1{</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghB-08WXIdlLcRsW19tYydrv8oUOjcH8GZqvtW9OMq6jVo_i8LizpMeWYRlbWL5s8Kg4E9K98K3X5t97AhT2UO4dKh8jq4s4CdZ_Pn6aaVRhSQ8o55J4DCSDacC-HejCcXNQj88ky7zvFX/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> border:1px solid #3b5998 !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> color:#FFFFFF !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font-size:20px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font-weight:700 !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> padding:5px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> margin:0 !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> overflow:hidden !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> .htmlarea{</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font-size:12px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font-weight:normal !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> height:265px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> padding:1px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> background:#fff !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> border-bottom:2px solid #ddd;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> overflow:hidden !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> #mdfooter{</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> text-align:left;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> background:#F2F2F2 !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> height:56px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> padding:10px 10px 10px 10px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> overflow:hidden !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> #mdclose{</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> float:right;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> background-color:#eee !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> border:1px solid #ccc !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> color:#111 !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font-weight:bold !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> padding:5px 8px 5px 8px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> text-decoration:none !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> display:inline-block !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> outline:none !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> position:relative !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font-size:18px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> margin:1px !important;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> #mdclose:active{</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> top:1px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> left:1px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> .grabthis{</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> bottom:80px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> font:8px "lucida grande",tahoma,verdana,arial,sans-serif;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> position:absolute;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> right:6px;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> text-align:right;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> z-index: 99999;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> .grabthis a{</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> color: #000;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> text-decoration:none;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> .grabthis a:hover{</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> text-decoration:underline;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> </style></div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> <script type='text/javascript'></div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> jQuery(document).ready(function() {</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> function makingdifferent_ppopup()  {</div> <div style="line-height: 22.386363983154297px;"> <span style="background-color: #fff2cc; color: #0b5394;">var sec = 10</span></div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> var timer = setInterval(function() {</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">    $("#mdfooter span").text(sec--);</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">    if (sec == 0) {</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">       $("#makingdifferentpopup").fadeOut("slow");</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">       clearInterval(timer);</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">    }</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> },1500);</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">   var mdwh = jQuery(window).height();</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">   var mdpph = jQuery("#makingdifferentpopup").height();</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">   var mdfromTop = jQuery(window).scrollTop()+50;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">  jQuery("#makingdifferentpopup").css({"top":mdfromTop});}</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">  //alert(jQuery.cookie('sreqshown'));</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">  //var mdww = jQuery(window).width();</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">  //var mdppw = jQuery("#makingdifferentpopup").width();</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">  //var mdleftm = (mdww-mdppw)/2;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">    var mdleftm = 500;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">  //var mdwh = jQuery(window).height();</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">  //var mdpph = jQuery("#makingdifferentpopup").height();</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">  //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">  jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;">      jQuery("#mdclose").click(function() {</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});</div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> </script></div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> <div id="makingdifferentpopup"> </div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> <h1> Join us on Facebook</h1> </div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> <div class="htmlarea"> </div> <div style="line-height: 22.386363983154297px;"> <span style="background-color: #fff2cc; color: #660000;"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F</span><span style="background-color: #93c47d; color: red;">weezytechstuff</span><span style="background-color: #fff2cc; color: #660000;">&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe></span></div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> <div class="grabthis"> </div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> By <a href="http://www.weezytechstuff.blogspot.in/" target="_blank">WeezyTechStuff</a> / <a href="http://www.weezytechstuff.blogspot.in/">+Get This!</a></div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> </div> </div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> </div> </div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> <div id="mdfooter"> </div> <div style="background-color: #fff2cc; line-height: 22.386363983154297px;"> <span style="color: #3d85c6;">Please wait..<span>10</span> Seconds</span></div> <div style="background-color: #fff2cc; line-height: 22.386363983154297px;"> <span style="color: #660000;"><a href="#" id="mdclose" onclick="return false;"></span><span style="color: red;">I dont have FB account</span><span style="color: #660000;"></a></span></div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> </div> </div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> </div> </div> <div style="background-color: #fff2cc; color: #660000; line-height: 22.386363983154297px;"> <!-- End popup --></div> </b></span><br />

Changes have to made

Replace  your facebook page name With WeezyTechStuff   in the code above

Additional changes

If you want wait time of popup in crease or decrease 

then change the value "10" with no of seconds you want in code above

var sec = 10

and

Please wait..<span>10</span> Seconds