إضافة صندوق إعجابات فيس بوك منبثق

إضافة صندوق إعجابات فيس بوك منبثق

مرحبا بكم زوار مدونة تدوين باحتراف، ان شاء الله في هذا الموضوع سنتطرق الى اضافة رائعة وهي اضافة صندوق إعجابات فيس بوك منبثق هذه الاضافة محبوبة عند البعض نظرا لما لها من فوائد خاصة لصفحات الفيسبوك، فالمدونات التي لها عدد كبير من الزوار تقوم بتركيبها وبالتالي يحصلون على اعجابات كثيرة في صفحاتكم على الفيسبوك.

معاينة : من هنا

طريقة التركيب :

في البداية يتوجب عليك اضافة هذا الكود الخاص بمكتبة الجيكويري (ان كان في مدونتك فلا داعي لان تضيفه)

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

الأن بعد اضافة الكود السابق ماعليك الا التوجه الى مدونتك ثم تخطيط ثم اضافة أداة HTML جديدة وتلصق الكود التالي :

<style type='text/css'>
#makingdifferentpopup{
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;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCubKqwwPr2-da3lCR1lwOLxE-oEVNRZxnXNGSkimQ2wu3b7ga0MlnIGtND-hnhUaRU5JRub8svBzY9Psosbtg2T7pzAgy1lDvx1cYzDDLQsdrxS12bO-GQUxmW19fod8_GHk2kHW64jUd/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 sec = 20
var timer = setInterval(function() {
   $("#mdfooter span").text(sec--);
   if (sec == 0) {
      $("#makingdifferentpopup").fadeOut("slow");
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#makingdifferentpopup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup)
.resize(makingdifferent_ppopup)
 //alert(jQuery.cookie('sreqshown'));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#makingdifferentpopup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#makingdifferentpopup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="makingdifferentpopup">
<h1>انضم الينا على الفيسبوك</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/TadwinTop&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://tadwinpro.blogspot.com/" target="_blank">تدوين باحتراف</a> / <a href="http://tadwinpro.blogspot.com/2015/01/facebook-type-jquery-pop-up-with-like-box-timer-for-bloggerblog.html" target="_blank">الاضافة</a>
</div>
</div>
<div id="mdfooter">Please wait..<span>20</span> Seconds<a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End popup -->

الأن قم بتغيير TadwinTop بمعرف صفحتك على الفيسبوك وقم بالحفظ.

ومبروووك عليك الاضافة.

لا تنسى نشر الموضوع مع اصدقائك عن طريق الأزرار في الاسفل وشكراا