إضافة صندوق الفيس بوك على نافذة منبثقة

السلام عليكم ، متابعي مدونة geek  arabs مرحبا بكم في درس جديد ، درس اليوم سيكون حول إضافة نافدة منبتقة عليها صندوق الفايسبوك ، هذه الإضافة جميلة و فعالة في مجال تحصيل على عدة إعجابات لصفحتكم على الفايس بوك . 
 لن أطل عليكم نمر إلى الشرح :)

لإضافة الأداة ما عليك سوى تتبع الخطوات :

1. توجه إلى لوحة التحكم

2. تخطيط 

3 إضافة أداة

4. HTML/Javascript

5. تم أضف هذا الكود

<style type="text/css">

/***********************************************

* CSS POP-UP With Light Box Effect- © New Facebook Tips Trick (http://new-facebook-tipstricks.blogspot.com/)

* This notice must stay intact for use.

* Visit http://new-facebook-tipstricks.blogspot.com/ for full source code.

***********************************************/

* html #exestylepopupdiv {position:absolute;}

#exestylepopupdiv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg69C3Sv2iWtR0AOFgj1GcaMHv1HyZOHHNeQ6lRU4OJ6HQeeSnuwNJYhyZalVqt2U3bfN6lM_zvOFYD7qBqRUvcXjolDLGkeOct5wD3TdX3su7XBYDJYrf59oJ2UZCoabdk8oT6M4dheg/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}

#exestylepopup {background-color: #fff; overflow:none;}

.exestylepopup {width:400px; height:300px; position:fixed; top:50%; left:50%; margin-top:-150px; margin-left:-200px;}

</style>

<!--[if lte IE 6]>

<style type="text/css">

/*<![CDATA[*/ 

html {overflow-x:auto; overflow-y:hidden;}

/*]]>*/

</style>

<![endif]-->

<div id="exestylepopupdiv">

<div id="exestylepopup" class="exestylepopup">

<center style="color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjAGylNB0Flz7lu5BI1ioWK5RvtRtwvRv8TzRNqvPw3L3of1T3nk3q_p0NDmiDnw16hB2Sdi-BnAF7mQ6rm0RauYNdA0NUy4GgD1iNSQrfeRsdj2Kyn_szxu1U1klsgTd9PWbKZBf_WQ/s40/exeideasclose.png"/>

</center>

<div id="exestylepopup" class="exestylepopup">

<center style="color:#000;cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjAGylNB0Flz7lu5BI1ioWK5RvtRtwvRv8TzRNqvPw3L3of1T3nk3q_p0NDmiDnw16hB2Sdi-BnAF7mQ6rm0RauYNdA0NUy4GgD1iNSQrfeRsdj2Kyn_szxu1U1klsgTd9PWbKZBf_WQ/s40/exeideasclose.png" />

</center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F/geekarabs&width=400&height=300&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:390px; height:260px;" allowtransparency="true"></iframe>

</div>

</div> </div>

ملحوضة : ما عليك سوى تغيير  geekarabs   بإسم الخاص يالصفحتك .

مبروك عليك ، لا تنسوا ضغط على زر أعجبني او وضع تعليق من أجل تشجيعنا 

هل أعجبك الموضوع ؟