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

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

عند دخولك إلى المدونة ستنبثق لك نافذة بها صندوق عائم في وسط المدونة ، هذا الصندوق يحتوي على  صفحتك على الفيس بوك

كما هو موضح على الصورة

 

طريقة انشاء نافذة منبثقة بتقنية jQuery بها صندوق اعجابات الفيس بوك (Facebook) (J'aime/Like) .

اهم مميزات الإضافة

انها تظهر مرة واحدة للزائر، أي أنها لن تزعج متتبعيك و زوار مدونتك .

ملحوظة :

 عندما تريد التعديل على الإضافة بما يناسبك ستظهر لك النافذة مرة واحدة فقط ، لأنها تعتمد على حفظ إيبي Ip لكي لا تظهر مرة ثانية.

طريقة تركيب الإضافة :

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

2. ثم تخطيط ،

3 إضافة أداة

 HTML/Javascript

ثم أضف هذا الكود

<style>#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}#cboxOverlay{position:fixed; width:100%; height:100%;}#cboxMiddleLeft, #cboxBottomLeft{clear:left;}#cboxContent{position:relative;}#cboxLoadedContent{overflow:auto;}#cboxTitle{margin:0;}#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}.cboxPhoto{float:left; margin:auto; border:0; display:block;}.cboxIframe{width:100%; height:100%; display:block; border:0;}#cboxOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2KPTP8aD-OB108vuWSnehS-h9J4Z_5Sts95DlcalsdGXgzjZ2fnQvbwdDwkt56odrj5Rw1t-pqL6Opp82P97Tk8OAW7pxj5fhZobRKOM2AG04SleGrsegDZ8GHXzjEyv4zf2dO5fb_LQc/s1600/overlay.png) repeat 0 0;}#colorbox{}    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXbRtZSsJi4bXexlkr1GEbYWo1Bqg6XsS0B2REWiPBAP5S6Mu6i2XadroK5NtsQtGkb-HRgI9bBUDCfLBb8tLT8gTUttH8p1UumAZUjOiWlh6eyFmsgXKbXapppucm0K3iFKuVWNxSk3t/s1600/controls.png) no-repeat -101px 0;}    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXbRtZSsJi4bXexlkr1GEbYWo1Bqg6XsS0B2REWiPBAP5S6Mu6i2XadroK5NtsQtGkb-HRgI9bBUDCfLBb8tLT8gTUttH8p1UumAZUjOiWlh6eyFmsgXKbXapppucm0K3iFKuVWNxSk3t/s1600/controls.png) no-repeat -130px 0;}    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXbRtZSsJi4bXexlkr1GEbYWo1Bqg6XsS0B2REWiPBAP5S6Mu6i2XadroK5NtsQtGkb-HRgI9bBUDCfLBb8tLT8gTUttH8p1UumAZUjOiWlh6eyFmsgXKbXapppucm0K3iFKuVWNxSk3t/s1600/controls.png) no-repeat -101px -29px;}    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXbRtZSsJi4bXexlkr1GEbYWo1Bqg6XsS0B2REWiPBAP5S6Mu6i2XadroK5NtsQtGkb-HRgI9bBUDCfLBb8tLT8gTUttH8p1UumAZUjOiWlh6eyFmsgXKbXapppucm0K3iFKuVWNxSk3t/s1600/controls.png) no-repeat -130px -29px;}    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXbRtZSsJi4bXexlkr1GEbYWo1Bqg6XsS0B2REWiPBAP5S6Mu6i2XadroK5NtsQtGkb-HRgI9bBUDCfLBb8tLT8gTUttH8p1UumAZUjOiWlh6eyFmsgXKbXapppucm0K3iFKuVWNxSk3t/s1600/controls.png) left top repeat-y;}    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXbRtZSsJi4bXexlkr1GEbYWo1Bqg6XsS0B2REWiPBAP5S6Mu6i2XadroK5NtsQtGkb-HRgI9bBUDCfLBb8tLT8gTUttH8p1UumAZUjOiWlh6eyFmsgXKbXapppucm0K3iFKuVWNxSk3t/s1600/controls.png) right top repeat-y;}    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiokq0eim01bz_ht9oa1xoYS_qFCK7QTE8Rrfwr0jJiVgOAF8t2MftuT4wGdmTMkjq76b-ML67hALjPIMfueYOqyrQbyZ3OW3OcMD-6GJrR9o_mmMX6dwdXYbxp4XFijmYluCWTLvacmx-n/s1600/border.png) 0 0 repeat-x;}    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiokq0eim01bz_ht9oa1xoYS_qFCK7QTE8Rrfwr0jJiVgOAF8t2MftuT4wGdmTMkjq76b-ML67hALjPIMfueYOqyrQbyZ3OW3OcMD-6GJrR9o_mmMX6dwdXYbxp4XFijmYluCWTLvacmx-n/s1600/border.png) 0 -29px repeat-x;}    #cboxContent{background:#fff; overflow:hidden;}        .cboxIframe{background:#fff;}        #cboxError{padding:50px; border:1px solid #ccc;}        #cboxLoadedContent{margin-bottom:28px;}        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXbRtZSsJi4bXexlkr1GEbYWo1Bqg6XsS0B2REWiPBAP5S6Mu6i2XadroK5NtsQtGkb-HRgI9bBUDCfLBb8tLT8gTUttH8p1UumAZUjOiWlh6eyFmsgXKbXapppucm0K3iFKuVWNxSk3t/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}        #cboxPrevious:hover{background-position:-75px -25px;}        #cboxNext{position:absolute; bottom:0; left:27px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXbRtZSsJi4bXexlkr1GEbYWo1Bqg6XsS0B2REWiPBAP5S6Mu6i2XadroK5NtsQtGkb-HRgI9bBUDCfLBb8tLT8gTUttH8p1UumAZUjOiWlh6eyFmsgXKbXapppucm0K3iFKuVWNxSk3t/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}        #cboxNext:hover{background-position:-50px -25px;}        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV3miGu-1Jz-i_lRaiLM1BTqjg6wg-GZ8xW-Ox5CNbRK1qwWp10cWWXiXlvclo8FZECp2o63MtbKapT34-jWoW6CqqhvEcCwY9aXLtO5fqZMN1l73NZiqihjfDWhvtzc0OU7QSl3d3HQfj/h120/loading.gif) no-repeat center center;}        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV3miGu-1Jz-i_lRaiLM1BTqjg6wg-GZ8xW-Ox5CNbRK1qwWp10cWWXiXlvclo8FZECp2o63MtbKapT34-jWoW6CqqhvEcCwY9aXLtO5fqZMN1l73NZiqihjfDWhvtzc0OU7QSl3d3HQfj/h120/loading.gif) no-repeat center center;}        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXbRtZSsJi4bXexlkr1GEbYWo1Bqg6XsS0B2REWiPBAP5S6Mu6i2XadroK5NtsQtGkb-HRgI9bBUDCfLBb8tLT8gTUttH8p1UumAZUjOiWlh6eyFmsgXKbXapppucm0K3iFKuVWNxSk3t/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}        #cboxClose:hover{background-position:-25px -25px;}.cboxIE #cboxTopLeft,.cboxIE #cboxTopCenter,.cboxIE #cboxTopRight,.cboxIE #cboxBottomLeft,.cboxIE #cboxBottomCenter,.cboxIE #cboxBottomRight,.cboxIE #cboxMiddleLeft,.cboxIE #cboxMiddleRight {    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);}.cboxIE6 #cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitiaWnPhxUgn8aG1lcEV_7LHRV5Dewzuw1-dMGSNPk4kJgRrAaDMb8CE5suMJQuQpjfjoBSNgYXSJsfl6Ez6unKWqD_tj9_-Da3SK_pCEQRG9VY7MCKQoS-aqmP8O2JJkbCp7sm3_NLJZx/s1600/borderTopLeft.png);}.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjub8s4vSXTZesPX5n9K2PDUopyvey0oj63L64saxkN_FfHm040wJSckQYHbJzNvimEzz0ck59yqznNkDDpyFYRL8-ratMGyHI4YRRmdHkBunmTPZjlGkOzVWLVtnGW08yE9Fvg2AJLhIip/s1600/borderTopCenter.png);}.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiVCerqybwhZzfOvdTCegMaQY9jzZqnN-V5WBzkqK8ut2EMAWsDIcMYgrrXfWhzJTEhh2Sghr0CybXf6pfQzZkSn6ZjZlnl-1Eivx-Tcptgl_4D9bUWN6xPHztylKlVjFYAgkP5k3Z6J4w/s1600/borderTopRight.png);}.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiVCerqybwhZzfOvdTCegMaQY9jzZqnN-V5WBzkqK8ut2EMAWsDIcMYgrrXfWhzJTEhh2Sghr0CybXf6pfQzZkSn6ZjZlnl-1Eivx-Tcptgl_4D9bUWN6xPHztylKlVjFYAgkP5k3Z6J4w/s1600/borderTopRight.png);}.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4aMaJSyV0uv2dA5ST7aOXZvt1TkBTMiTRW4EOdR0pvG2wiFqYFLBQ4eCk0E4wRI6fDt3hNvIypzmNuIetjvFetmOherwCje67AjZ7EBaQAYDXfZT-vyVoB7QinUpDqoibsIK9i9t4jlwo/s1600/borderBottomCenter.png);}.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzGbOF6F6tVhki76ATYn4HIpbkdG2M3qqGPG6U1sLkMoaFCGi_BP5A-dchj5E5DVGEUq6xt88RVaDT4CwArzip6qrMaLbflL6GpiYBuM38wJMdMjaXJDJrLdOmRbGxn5fFUc3y239n8NeK/s1600/borderBottomRight.png);}.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeG3sl1nqvjLaQSjNHdNQvVAftOSChqbPYFEhw77PDZPhgWBHhXoANg-X06UkhmtqIevs7S8fHF3pZXOdoRn2affeqTysquay91MUC81z7MTeNbrqwAdgODPGYBycEZzHzICS5m8KDDqW/s1600/borderMiddleLeft.png);}.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipjXbMZXpKeSbDFJQGBkJpQpsIFVkLknzuBOETF1yNukg8kBSF3W2xHJjzmCjzF-LP2BPY9kI794Wqau7i11N8Ev4CohWkUEGyYQ24cEkk69P_ijPmnSxUKBa17fDbG1tSJLRR9y-zkbRl/s1600/borderMiddleRight.png);}.cboxIE6 #cboxTopLeft,.cboxIE6 #cboxTopCenter,.cboxIE6 #cboxTopRight,.cboxIE6 #cboxBottomLeft,.cboxIE6 #cboxBottomCenter,.cboxIE6 #cboxBottomRight,.cboxIE6 #cboxMiddleLeft,.cboxIE6 #cboxMiddleRight {    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");}#subscribe {font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;}#subscribe a,#subscribe a:hover,#subscribe a:visited {text-decoration:none;}.box-tagline {color: #999;margin: 0;text-align: center;}#subs-container {padding: 35px 0 30px 0;position: relative;}a:link, a:visited {border:none;}.demo {display:none;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script src="http://yourjavascript.com/3093182329/btt_jquery.colorbox-min.js"></script><script type="text/javascript">jQuery(document).ready(function(){if (document.cookie.indexOf('visited=true') == -1) {var fifteenDays = 1000*60*60*24*7;var expires = new Date((new Date()).valueOf() + fifteenDays);document.cookie = "visited=true;expires=" + expires.toUTCString();$.colorbox({width:"400px", inline:true, href:"#subscribe"});}});</script><!-- This contains the hidden content for inline calls --><div style='display:none'><div id='subscribe' style='padding:10px; background:#fff;'><center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjigQkGVm5mbrMOpMNpGR0KVvwKk89DwTzrQG66yedeLQ9ccJiyq_fqz-65JZa5kXR4DOjumQUjb2eUYyEpADGNZdsoUWs0GsrZLpzvPO7Kvq1uf5y_2hqvt69BhOq861BvHhsqMtsPXeej/s1600/BecomeFanOnFacebook.jpg" width:300px; height:150px;"/></center><center><iframe src="//www.facebook.com/plugins/likebox.php?href= info3arab &amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe></center><p style=" float:right;  margin-right:15px;  font-size:6px;" >Powered By <a style=" font-size:6px; color:#3B78CD; text-decoration:none;" href="http://www.bloggertipsandtricks.net/2012/04/jquery-popup-facebook-like-box-v5.html" target='_blank'>Blogger Tips and Tricks</a></p></div></div>

قم بتغيير info3arab باسم صفحتك فيس بوك 

لاتنسو الاشتراك على مدونتنا للتوصل بجديدنا

 

Follow @hel3arabyweb