نافذة منبثقة بتقنية 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/AVvXsEihFZVKHq2RB_hmuGADA8BmmBvshGRpRNO5eWoGCXs7G_Jdx03MDE9dhQRjlsU_qX3k0Ce7sZH4XYdmzhXnV3UpwaHcaJDJSgGtNyogxGVspBdh6VW_haeaTzco3uaFQvfhJ8SPDsXBcyhf/s1600/overlay.png) repeat 0 0;}#colorbox{}    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv34swTt_U8ld7-4Mmwv4rh7vRKgN5yWeuRwXyAlcZutuk0gtbsjF6Tk3QqMnK4It0nqfLa_1dGdosUbarWs7S7zY7kaQr37lknmWtJQrpo27i7OFUUptXttXKxMrqVw3L3UqVZfyIX96K/s1600/controls.png) no-repeat -101px 0;}    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv34swTt_U8ld7-4Mmwv4rh7vRKgN5yWeuRwXyAlcZutuk0gtbsjF6Tk3QqMnK4It0nqfLa_1dGdosUbarWs7S7zY7kaQr37lknmWtJQrpo27i7OFUUptXttXKxMrqVw3L3UqVZfyIX96K/s1600/controls.png) no-repeat -130px 0;}    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv34swTt_U8ld7-4Mmwv4rh7vRKgN5yWeuRwXyAlcZutuk0gtbsjF6Tk3QqMnK4It0nqfLa_1dGdosUbarWs7S7zY7kaQr37lknmWtJQrpo27i7OFUUptXttXKxMrqVw3L3UqVZfyIX96K/s1600/controls.png) no-repeat -101px -29px;}    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv34swTt_U8ld7-4Mmwv4rh7vRKgN5yWeuRwXyAlcZutuk0gtbsjF6Tk3QqMnK4It0nqfLa_1dGdosUbarWs7S7zY7kaQr37lknmWtJQrpo27i7OFUUptXttXKxMrqVw3L3UqVZfyIX96K/s1600/controls.png) no-repeat -130px -29px;}    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv34swTt_U8ld7-4Mmwv4rh7vRKgN5yWeuRwXyAlcZutuk0gtbsjF6Tk3QqMnK4It0nqfLa_1dGdosUbarWs7S7zY7kaQr37lknmWtJQrpo27i7OFUUptXttXKxMrqVw3L3UqVZfyIX96K/s1600/controls.png) left top repeat-y;}    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv34swTt_U8ld7-4Mmwv4rh7vRKgN5yWeuRwXyAlcZutuk0gtbsjF6Tk3QqMnK4It0nqfLa_1dGdosUbarWs7S7zY7kaQr37lknmWtJQrpo27i7OFUUptXttXKxMrqVw3L3UqVZfyIX96K/s1600/controls.png) right top repeat-y;}    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJNd1M_YBlBaKOnd1SXMtzrsw0OXKk8nJ7JaAIhtP0eKr2pNiSWGsr95NK3_vzIfoaunIG99vikjoi-1BpoCtxu8iWfBYCwHRqqSHmVSbARdHlZSE13k0m8-L-evob-HfhqXEc5PUwOb-9/s1600/border.png) 0 0 repeat-x;}    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJNd1M_YBlBaKOnd1SXMtzrsw0OXKk8nJ7JaAIhtP0eKr2pNiSWGsr95NK3_vzIfoaunIG99vikjoi-1BpoCtxu8iWfBYCwHRqqSHmVSbARdHlZSE13k0m8-L-evob-HfhqXEc5PUwOb-9/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/AVvXsEhv34swTt_U8ld7-4Mmwv4rh7vRKgN5yWeuRwXyAlcZutuk0gtbsjF6Tk3QqMnK4It0nqfLa_1dGdosUbarWs7S7zY7kaQr37lknmWtJQrpo27i7OFUUptXttXKxMrqVw3L3UqVZfyIX96K/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/AVvXsEhv34swTt_U8ld7-4Mmwv4rh7vRKgN5yWeuRwXyAlcZutuk0gtbsjF6Tk3QqMnK4It0nqfLa_1dGdosUbarWs7S7zY7kaQr37lknmWtJQrpo27i7OFUUptXttXKxMrqVw3L3UqVZfyIX96K/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/AVvXsEjxZxmkQJLE4XLgxAqYzbu0TSYJWAOcg7gj4owY4qCWVC93ONfW8UDOnFb3NnYKTV2AAgg3-nHgbNs2R3OpLO3UwsV3s_Ce-i18So96gi5wAhyphenhyphenoJWTTDHFo1BR1soK6hNh6oEYz6nffcqaD/h120/loading.gif) no-repeat center center;}        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxZxmkQJLE4XLgxAqYzbu0TSYJWAOcg7gj4owY4qCWVC93ONfW8UDOnFb3NnYKTV2AAgg3-nHgbNs2R3OpLO3UwsV3s_Ce-i18So96gi5wAhyphenhyphenoJWTTDHFo1BR1soK6hNh6oEYz6nffcqaD/h120/loading.gif) no-repeat center center;}        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv34swTt_U8ld7-4Mmwv4rh7vRKgN5yWeuRwXyAlcZutuk0gtbsjF6Tk3QqMnK4It0nqfLa_1dGdosUbarWs7S7zY7kaQr37lknmWtJQrpo27i7OFUUptXttXKxMrqVw3L3UqVZfyIX96K/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/AVvXsEgw5NjnsiCf2yuvQ6qwWpfWje00atu2UTaLQOCQE822pArgZvhKjidFsCWL-jsRULnY6OWr4zADIWyJDehoKPjWbSD3gRxcuQb67CorT_flM-Ne2L4pwF9QRa75XpEGpAgZUiTk5h52l46E/s1600/borderTopLeft.png);}.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAmZ2Ex-Jm2V6iMV99zGBtIr5mmgxfmGqfGiEwqydRHWPzY6pOUcy3UNfQiMF5lXeAeIUnTNrkLxp8JBig4MRUntu4oKplC5Uq-ePKDIsPU3lQtMtBx6_d6b1l08PR5RQEu85imv4IdLrC/s1600/borderTopCenter.png);}.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBVXJIgtqvLiMYyzAjNAynj2saTc4uWFp7J_QJm2dTmMzC-AsCBJXRDj6Uz6iKJEtpcOI_E1X5dxttUAE3RmJyM2bWs4Eam6rjjbbbteNr85H3a-CGLkCFO0VLRXni1dKSrogShfhtetID/s1600/borderTopRight.png);}.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBVXJIgtqvLiMYyzAjNAynj2saTc4uWFp7J_QJm2dTmMzC-AsCBJXRDj6Uz6iKJEtpcOI_E1X5dxttUAE3RmJyM2bWs4Eam6rjjbbbteNr85H3a-CGLkCFO0VLRXni1dKSrogShfhtetID/s1600/borderTopRight.png);}.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIQ-kEQYClCnIsotao_qMK4DHq5YkbnOv3_xYbSbDMk2vyL8rI3QagYDsE8_e1WGisYWVDYPpU8q8mic0wOnIUFZ7CdOUiCPYPCG7rE9DKY5k8aSfk9i9iFEgyGqLoG1hrsIHK-WlJYwc9/s1600/borderBottomCenter.png);}.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifU89wFeNJFhlkiFPGUfTCqFJ5zm8Enhp8QeL1nTHzPR4phjMBo1VA0w3K_rJo9qA_e66ZKmYYQ_9wGgTKc6COzPAqLuwoMKXu2r4DW6AG4OU5UNgZHymHwsIWP1Pci8WqDXyyZi8W0Xmq/s1600/borderBottomRight.png);}.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ9KNpujxyQvDHsECiO8WpEX1DoWUC4yqXGsjspYjSNQz4JME1Y_eo3zPhUobfa6kWNQiWOj7U9-kPpdErvnXDh_pfH8P6RFUA_FgXO98UHjMBMStxd9KPxxDXnJs6bwd8z5iswvueBtzo/s1600/borderMiddleLeft.png);}.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx1l_ICq4wloeQxQRubsS3FDxvVeWQR6oUFJX8MP4yDs6ead-S2S0MEyheIDIxQ7sr8V6KSII_rfAr4_hVubvjqFJ2iaGfJw8La7W_4RUiuxfLQVB3n800Pol5z_uEgsmxt9eXLEMihMb4/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/AVvXsEhKaHpYa0cMf6xKjdw2plVu2i1fduhyJHXpig2BQ5xJ9CMvZIvrvLyz7eAXgtBvaoS7bKVmdYRxllh4aBdNjfPeaSVCDlygctanT2_kUajoOM24grNVMjZfvszQOsgfVKn6yNgutgeiVjR0/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 باسم صفحتك فيس بوك

اي اسئلة او استفسار نحن نهن الاشارة

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

شارك الموضوع إذا أعجبك

share

Med Service