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

السلام عليكم ورحمة الله وبركاته

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

صورة
مشاهدة مثال حي من هنا

أولا لإضافة الكود تأكد أن في مدونتك أو موقعك متوفر لديك ملف
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
إذا كان بالفعل متوفر في مدونتك سواء كان هذا الأصدار او غيره لا مشكلة
أما إذا كان غير متوفر أحد اصدارات ajax قم بإضافته فوق الرمز </head>

ثانياً إذهب الى لوحة التحكم -->> تخطيط -->> إضافة أداة ثم أختر اداة HTML/JavaScript 
ثم أضف الكود التالي في الأداة


<style type='text/css'>
#PopFace {
position : absolute;
display : block;
top : 0;
left : 0;
width : 100%;
height : 100%;
position : fixed;
background-color : rgba(0, 0, 0, 0.9);
margin : 0;
overflow : hidden;
z-index : 999999;
}
#PopBook {
background-color : #ecf0f1;
overflow : hidden;
z-index : 999999;
}
.PopBook {
width : 290px;
height : 300px;
position : fixed;
top : 45%;
left : 50%;
margin-top : -200px;
margin-left : -200px;
border : #3b5998 solid 10px;
padding : 20px;
z-index : 999999;
border-radius : 4px;
}
#PopTitle {
background : #3b5998;
color : #fff;
font-size : 18px !important ;
font-weight : 700;
width : 324px;
margin : 0 -27px 10px -27px;
padding : 10px;
line-height : 25px;
text-align : center;
float : left;
}
.anarchyta {
width : 280px;
height : 200px;
position : relative;
background : #3b5998;
padding : 0 10px 15px 0;
margin-top : 60px;
border-radius : 4px;
overflow : hidden;
}
.anarchyta, .anarchyta:before, .anarchyta:after {
background : transparent;
border : #3b5998 solid 1px;
}
.anarchyta:before, .anarchyta:after {
position : absolute;
content : "";
bottom : -3px;
left : 2px;
right : 2px;
height : 1px;
border-top : none;
}
.anarchyta:after {
left : 4px;
right : 4px;
bottom : -5px;
box-shadow : 0 0 2px #3b5998;
}
.close {
background : #3b5998;
padding : 5px 5px 10px 5px;
font-size : 14px;
font-weight:bold;
color : #ecf0f1;
text-decoration : none;
border-radius : 4px 4px 0 0;
cursor:pointer;
} 
</style>

<div id='PopFace'>
<div class='PopBook' id='PopBook'>
<h3 id='PopTitle'>تابعنا على فيس بوك</h3>
<div class='anarchyta'>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/mdadice&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
<div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/' data-show-faces='true' data-stream='false' data-width='292'></div>
</div><br/>
<a class='close' onmouseup='document.getElementById(&#39;PopFace&#39;).style.display=&#39;none&#39;'>إغلاق</a>
</div>
</div>


غير mdadice بأسم او معرف صفحتك على فيس بوك ثم أختر حفظ


مشاركات أقدم المقال التالي
3 تعليق
  • Unknown
    Unknown 14‏/04‏/2015، 6:20:00 م

    thanak pro you professniiel

    شكرآ يا برو انت محترف والله شكرآ شكرآ احلى تعليق :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :) :)

    • مداد الجليد
      مداد الجليد 16‏/04‏/2015، 8:08:00 م

      شكراً لمرورك وأتمنى لكم التوفيق.

  • Unknown
    Unknown 21‏/05‏/2015، 7:12:00 م

    ررؤؤررؤؤ (o) ؤؤرؤرؤرؤرؤؤؤؤعة

أضف تعليق
عنوان التعليق