 |
|
|
|
|
|
|||||||
 |
|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
02-16-2013, 03:50 PM
|
#1 |
|
مدون نشيط
 
تاريخ التسجيل: Jul 2012
المشاركات: 159
|
نافذة منبثقة بتقنية jQuery بها صندوق اعجابات الفيسبوك لمدونات بلوجر
السلام عليكم ورحمة الله تعالى وبركاته. تعتبر النوافذ المنبثقة من أهم الوسائل التي يلجأ اليها المدون (صاحب المواقع) للفت انتباه الزائر بشيء معين، سواء كان اعلان (لا أقصد إعلانات ادسنس لأنهذه الطريقة تعتبر مخالفة لقوانين وشروط جوجل) أو صندوق الفيسبوك او التويتر او صندوق الاشتراك عن طريق البريد الالكتروني وهلم جرا .  لذلك في هذه التدوينة سنتعلم سويا طريقة انشاء هذه النافذة المنبثقة بتقنية jQuery وسنخصصها في هذا الشرح لصندوق اعجابات الفيسبوك (Facebook) لأن أغلب المستخدمين يتوفرون على صفحات فيسبوك لمدوناتهم، ويريدون الكثير من المشتركين عن طريق حث الزائر على الضغط على زر الاعجاب (J'aime/Like) . مميزات الإضافة :
سلبيات الإضافة :
طريقة تركيب الإضافة :
الكود : كود بلغة HTML:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> <script src="http://exeideasinternational.googlecode.com/files/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*30; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"400px", inline:true, href:"#exestylepopups"}); } }); </script> <style type="text/css"> /* ColorBox v1.3.16 (Copyright (c) 2011 Jack Moore - [email protected]) */ #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%}#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:#000;opacity:0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important} </style> <div style='display:none'> <div id='exestylepopups' style='padding:10px; background:#fff;'> <center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F4weeb&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:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.4we-eb.blogspot.com">4we-eb</a></p> </div></div> لا تنس تغيير :
ان اعجبك الموضوع لا تنس الإشتراك في صفحة المدونة على الفيسبوك
__________________
دروس بلوجر ,قوالب , اضافات http://TadwiinPro.blogspot.com/
|
|
|
|
|
02-17-2013, 01:02 PM
|
#2 |
|
مدون جديد
تاريخ التسجيل: Nov 2012
المشاركات: 29
|
رد: نافذة منبثقة بتقنية jQuery بها صندوق اعجابات الفيسبوك لمدونات بلوجر
__________________
|
|
|
|
|
02-28-2013, 08:52 PM
|
#3 | |
|
مدون نشيط
تاريخ التسجيل: Jul 2012
المشاركات: 159
|
رد: نافذة منبثقة بتقنية jQuery بها صندوق اعجابات الفيسبوك لمدونات بلوجر
اقتباس:
شكرااا لك أخي الكريم على الرد المشجع ونتمنا أن يستفيد الجميع من الإضافة ،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،، ،،،،،
__________________
دروس بلوجر ,قوالب , اضافات http://TadwiinPro.blogspot.com/
|
|
|
|
|
|
| مواقع النشر (المفضلة) |
| الكلمات الدلالية (Tags) |
| منبثقة, بتقنية, jquery, نافذة |
| الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
المواضيع المتشابهه
|
||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| اضافة -زر / صندوق- الفيسبوك الى مدونات بلوجر | الدليل | إضافات وأدوات بلوجر | 0 | 04-21-2013 12:24 PM |
| نافذة منبثقة مثل التي في مدونة إحترف للإعجاب بصفحتك | taquafati | إضافات وأدوات بلوجر | 0 | 04-04-2013 11:56 PM |
| صندوق اعجابات الفيس بوك ينزلق عندما تنزل اسفل صفحة المدونة بطريقة جميلة | مصطفي جبر | إضافات وأدوات بلوجر | 5 | 09-04-2012 04:09 AM |
| نافذة دعائية متحركة لمدونات بلوجر جديدة | jeussef | إضافات وأدوات بلوجر | 4 | 09-01-2012 11:44 AM |
|
الساعة الآن 12:06 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |
العرض العادي
