نافذة منبثقة بتقنية jQuery بها صندوق اعجاب فيس بوك
السلام عليكم و رحمة الله تعالى و بركاته
تحية طيبة لاصدقاء و متتبعي شروحات مهووس على مدونة مطور بلوجر، درس اليوم سيكون حول إضافة نافذة منبتقة عليها صندوق الفيس بوك ، هذه الإضافة جميلة و فعالة و تعتبر من اهم الوسائل التي يلجأ اليها المدون ل لفت انتباه الزائر ، و كدلك هي اسرع وسيلة لجمع اكبر عدد للاعجاب بصفحتك على الفيس بوك
عند دخولك إلى المدونة ستنبثق لك نافذة بها صندوق عائم في وسط المدونة ، هذا الصندوق يحتوي على صفحتك على الفيس بوك
كما هو موضح على الصورة
تحية طيبة لاصدقاء و متتبعي شروحات مهووس على مدونة مطور بلوجر، درس اليوم سيكون حول إضافة نافذة منبتقة عليها صندوق الفيس بوك ، هذه الإضافة جميلة و فعالة و تعتبر من اهم الوسائل التي يلجأ اليها المدون ل لفت انتباه الزائر ، و كدلك هي اسرع وسيلة لجمع اكبر عدد للاعجاب بصفحتك على الفيس بوك
عند دخولك إلى المدونة ستنبثق لك نافذة بها صندوق عائم في وسط المدونة ، هذا الصندوق يحتوي على صفحتك على الفيس بوك
كما هو موضح على الصورة
How To Add POP UP Facebook Like Box For Blog & Website?
طريقة انشاء نافذة منبثقة بتقنية 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/AVvXsEg7E4t8r4J4KFSq3Jh4qAUgAGgCwizpruTsDOsRSMlelIFyT9l72yhQ6bnS9jzO_0ZDnEd0_bqdbH_6vd6JyZ5gMu1f4Yh9dkzApgdbdhmeaO4qY0g7dAbG5KEdhs2OpqSQdD2J_uuRITfV/s1600/overlay.png) repeat 0 0;}#colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-63TQu7rplvDVRxOczO29kK6swrJs1TilWmRpJBoWJXyErjThyphenhyphen_yG_CynhFFttqd3fizToWK0kjGEi0SOkXQdF6R8OGyjcuuriEJZkHyrRnU8EKu-WTMf0CLLOXvEODekP_z0g7qAn3jK/s1600/controls.png) no-repeat -101px 0;} #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-63TQu7rplvDVRxOczO29kK6swrJs1TilWmRpJBoWJXyErjThyphenhyphen_yG_CynhFFttqd3fizToWK0kjGEi0SOkXQdF6R8OGyjcuuriEJZkHyrRnU8EKu-WTMf0CLLOXvEODekP_z0g7qAn3jK/s1600/controls.png) no-repeat -130px 0;} #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-63TQu7rplvDVRxOczO29kK6swrJs1TilWmRpJBoWJXyErjThyphenhyphen_yG_CynhFFttqd3fizToWK0kjGEi0SOkXQdF6R8OGyjcuuriEJZkHyrRnU8EKu-WTMf0CLLOXvEODekP_z0g7qAn3jK/s1600/controls.png) no-repeat -101px -29px;} #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-63TQu7rplvDVRxOczO29kK6swrJs1TilWmRpJBoWJXyErjThyphenhyphen_yG_CynhFFttqd3fizToWK0kjGEi0SOkXQdF6R8OGyjcuuriEJZkHyrRnU8EKu-WTMf0CLLOXvEODekP_z0g7qAn3jK/s1600/controls.png) no-repeat -130px -29px;} #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-63TQu7rplvDVRxOczO29kK6swrJs1TilWmRpJBoWJXyErjThyphenhyphen_yG_CynhFFttqd3fizToWK0kjGEi0SOkXQdF6R8OGyjcuuriEJZkHyrRnU8EKu-WTMf0CLLOXvEODekP_z0g7qAn3jK/s1600/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-63TQu7rplvDVRxOczO29kK6swrJs1TilWmRpJBoWJXyErjThyphenhyphen_yG_CynhFFttqd3fizToWK0kjGEi0SOkXQdF6R8OGyjcuuriEJZkHyrRnU8EKu-WTMf0CLLOXvEODekP_z0g7qAn3jK/s1600/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp5hCuzFE5YC2Df85Mh5nteNBJuKpkDmZkxPKipEa00ww1tDOV9M3Ciu-sI_rE-JbiweM9h2H6Yy3kMUExJKbwNjde1ZsPHg2sWCR0YVmHrRKQaf6ADhhRLi6gmRhpuVzrkFJXKtdOUSop/s1600/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp5hCuzFE5YC2Df85Mh5nteNBJuKpkDmZkxPKipEa00ww1tDOV9M3Ciu-sI_rE-JbiweM9h2H6Yy3kMUExJKbwNjde1ZsPHg2sWCR0YVmHrRKQaf6ADhhRLi6gmRhpuVzrkFJXKtdOUSop/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/AVvXsEg-63TQu7rplvDVRxOczO29kK6swrJs1TilWmRpJBoWJXyErjThyphenhyphen_yG_CynhFFttqd3fizToWK0kjGEi0SOkXQdF6R8OGyjcuuriEJZkHyrRnU8EKu-WTMf0CLLOXvEODekP_z0g7qAn3jK/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/AVvXsEg-63TQu7rplvDVRxOczO29kK6swrJs1TilWmRpJBoWJXyErjThyphenhyphen_yG_CynhFFttqd3fizToWK0kjGEi0SOkXQdF6R8OGyjcuuriEJZkHyrRnU8EKu-WTMf0CLLOXvEODekP_z0g7qAn3jK/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/AVvXsEi4jQTObhNWYIYjNFUMA3sAdx8DTj69Tb7EJSsozEsA6mYfG7t5sKaohJx8wXUKRav-L5FYdJV1xQEVSUOtkBkALBxuAsqvG4PH1GMaKQvD6SHNvP4l2SbHwXBtK-Z7enmIijU2qoijWxf1/h120/loading.gif) no-repeat center center;} #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jQTObhNWYIYjNFUMA3sAdx8DTj69Tb7EJSsozEsA6mYfG7t5sKaohJx8wXUKRav-L5FYdJV1xQEVSUOtkBkALBxuAsqvG4PH1GMaKQvD6SHNvP4l2SbHwXBtK-Z7enmIijU2qoijWxf1/h120/loading.gif) no-repeat center center;} #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-63TQu7rplvDVRxOczO29kK6swrJs1TilWmRpJBoWJXyErjThyphenhyphen_yG_CynhFFttqd3fizToWK0kjGEi0SOkXQdF6R8OGyjcuuriEJZkHyrRnU8EKu-WTMf0CLLOXvEODekP_z0g7qAn3jK/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/AVvXsEhHGZJTVsiLFkMFfx6-Y9UFcXXqVWQ1tSVgPiPlohnLus2kc9DD0RjefSzyRASDhAvjcFjWThosM9_6ilBZkLzQ2ALt3aVwb_Jsx9IKbA7jHTz3dSwh85HkQUx52LHgxJgUU0Ksar2ZWNXx/s1600/borderTopLeft.png);}.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrDFcjY3CZBXkRkzdypOKWhT95mVfXJr_t-aNYeCCtXUQxER5BFKrsv_-1fIS9EgFDNSvRO9PiMx9TPxQn6YQ21mvWbsE0O-YPWiX9MWdPWvGXppYnkdo3GNr27ACdUxx_-oErM4tJhHx2/s1600/borderTopCenter.png);}.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX7ZiUA9XewLl21O1GZGDxjLvajMDrUctd5aPCeNQrqeQK5tVr7bBDbQonFo-W5F-KlTX5Vu6o20NHk_nqsonmys6HdyJ23r1WtzBp5f7TMAX_Md43toafUwKenK8KXcK8_1X86iLdDQXA/s1600/borderTopRight.png);}.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX7ZiUA9XewLl21O1GZGDxjLvajMDrUctd5aPCeNQrqeQK5tVr7bBDbQonFo-W5F-KlTX5Vu6o20NHk_nqsonmys6HdyJ23r1WtzBp5f7TMAX_Md43toafUwKenK8KXcK8_1X86iLdDQXA/s1600/borderTopRight.png);}.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzHrDZxxGrD4IwH6qI4RUlMv0oBUeC-a09kfAV0xd0TjZnsWOZczHGcKNmWmKggh1IY0NHsIKxOI5Bx68Eku0T01-UT9ToTQ4llGEQwLkP5G3CuYoKbTeZN4gFulh_W1FJQYSYTBmoiZjU/s1600/borderBottomCenter.png);}.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP6Q-O2YFB6f7kFjBtBKGGJ5qjMub75xr-2018uPryobXuniHErRNtDu-kOSmg9YZKU_WVw4HymPdNjdroSo9HT4UJg8KYpw1g24yxh9ViadU-mYbYUSMna6bueJuaNoBarO2Asj7UwB0I/s1600/borderBottomRight.png);}.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn0bj0rT3okkP3PInK1BNo-in8eyA_rZB_Y3uSd_RNhyUztCSGSc4GHK1FfzC93RchAP2oRwjpt95qFEDmN16yUBCl6WbTpwXE71s8p72jfI_s5ldbMhvxtnnEW388FSz2O2gg-yw58Snw/s1600/borderMiddleLeft.png);}.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzBoLU148SMFwd-Ai26B_6bsKQ6qEm37BONFbAl0wz2nEaGIvx2UhcTscYD9qpgZgVz0fOF03FKfCoz17N-pue0Qz_FNHRECSYYIP_tUWmQstp3pwyEYdAF736FJQ6Hy3lcQpUjTJN6s6/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/AVvXsEiFK5z5WSVbzcvQFCkFEgugqZxxLI5R-v_yznccnL5QdufebllZngA_qHXbp2T37_vGz2ofZ_70s1G4sM2_FXOTEQWah9dkW2jJfgM989mGm7Q1TL-pTnEHOEMi8yJNGNj0bufiWquitpc_/s1600/BecomeFanOnFacebook.jpg" width:300px; height:150px;"/></center><center><iframe src="//www.facebook.com/plugins/likebox.php?href= info3arab &width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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 باسم صفحتك فيس بوك
اي اسئلة او استفسار نحن نهن الاشارة
لاتنسو الاشتراك على مدونتنا للتوصل بجديدنا
الانضمام إلى المحادثة