Bishal Creations Complete PC Solutions And Games Download

Facebook Pop-up Like Box For Blogger

This Is A Another Cool Widget For Blogger,You Can Increase Your Facebook Fans By Using this Widget.Facebook popup with like box with much more control options. This widget includes a time counter option and it can be controlled manually by yourself whether it to show immediately as soon as a visitor enters your site or after a specified time. And for this amazing widget you don’t need to have any complication downloading options and so, but instead you can have a JavaScript code for this widget which is created by myself for easier access. The installation part is extremely easy as you just need to follow the below stated steps.
This one comparatively loads faster compared to the previous Facebook blogger widgets I published so far, and also will work with all browsers like IE-7+ and other major browsers. So don’t worry and move ahead with this amazing widget and decrease your work load.
Preview:-

How to install this widget to blogger?

STEP : 1 Adding jQuery Plugin.
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>


In you blogger dashboard > Navigate to Layout > Add a Gadget
Choose HTML/Javascript from the list.
Copy and paste below code into it

<style type='text/css'>

#bishalcreationspopup{

position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#bishalcreationspopup span{
font-size:20px !important;
font-weight:bold !important;
}
#bishalcreationspopup h1{
background:#6d84b4 url(http://4.bp.blogspot.com/-rNUTIpDQ21s/T0NqE_vv6GI/AAAAAAAACps/GSoWE2n9Oy8/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#bishalcreationstpopup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#bishalcreationspopup").css({"top":mdfromTop});}
jQuery(window).scroll(bishalcreations_ppopup)
.resize(bishalcreations_ppopup)
 //alert(jQuery.cookie('sreqshown'));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#bishalcreationspopup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#bishalcreationspopup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#bishalcreationspopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#bishalcreationspopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="bishalcreationspopup">
<h1>Get Latest Update With  Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Bishalcreations.tk&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe>
<div class="grabthis">
By <a href="http://www.bhandaribishal.com.np/" target="_blank">Bishal Creations</a> / <a href="http://www.bhandaribishal.com.np/2015/08/facebook-pop-up-like-box-for-blogger.html" target="_blank">+Get This!</a>
</div>
</div>
<div id="mdfooter"><a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End popup -->



Now Change The Red Highlight Text With Your Facebook Username .Now You Successfully Install Facebook Pop-up Like Box Widget In Blogger/Blog.
Happy Blogging!
Previous
Next Post »
Post A Comment Using..

1 comment :

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Notify Me" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.
ConversionConversion EmoticonEmoticon