معهد خبراء بلوجر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)
-   إضافات وأدوات بلوجر (https://www.bloggerexp.com/forumdisplay.php?f=10)
-   -   نافذة منبثقة بتقنية jQuery بها صندوق اعجابات الفيسبوك لمدونات بلوجر (https://www.bloggerexp.com/showthread.php?t=5958)

ilyass kéng 02-16-2013 03:50 PM

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

لذلك في هذه التدوينة سنتعلم سويا طريقة انشاء هذه النافذة المنبثقة بتقنية jQuery وسنخصصها في هذا الشرح لصندوق اعجابات الفيسبوك (Facebook) لأن أغلب المستخدمين يتوفرون على صفحات فيسبوك لمدوناتهم، ويريدون الكثير من المشتركين عن طريق حث الزائر على الضغط على زر الاعجاب (J'aime/Like) .


مميزات الإضافة :
  • كود بسيط . بتقنية ( jQuery )
  • اضافة انيقة وجذابة.
  • الأهم من المميزات السابقة هو أن النافذة تظهر مرة واحدة للزائر، أي أنها لن تسبب له الازعاج والقلق .

سلبيات الإضافة :
  • للاضافة شئ سلبي واحد وهو : أنك عندما تريد التعديل على الإضافة بما يناسب مدونتك ستظهر لك مرة واحدة فقط ، مما ستضطر الى مسح ملفات الكوكيز (Kookies) لأنها تعتمد على حفظ إيبي Ip الزائر لكي لا تظهر له مرة ثانية. لكن لاتنس انك ستعدل عليها مدة واحدة فقط .

طريقة تركيب الإضافة :
  • اذهب الى لوحة التحكم
  • توجه الى تخطيط
  • اختر اضافة أداة
  • اختر اداة HTML/JAVASCRIPT
  • الصق الكود اسفله
  • ثم حفظ

الكود :
كود بلغة 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&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: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>

لا تنس تغيير :

ان اعجبك الموضوع لا تنس الإشتراك في صفحة المدونة على الفيسبوك

fkjlwv0 02-17-2013 01:02 PM

رد: نافذة منبثقة بتقنية jQuery بها صندوق اعجابات الفيسبوك لمدونات بلوجر
 
تسلمممممممممممممممممممم

ilyass kéng 02-28-2013 08:52 PM

رد: نافذة منبثقة بتقنية jQuery بها صندوق اعجابات الفيسبوك لمدونات بلوجر
 
اقتباس:

المشاركة الأصلية كتبت بواسطة fkjlwv0 (المشاركة 19665)
تسلمممممممممممممممممممم


شكرااا لك أخي الكريم على الرد المشجع
ونتمنا أن يستفيد الجميع من الإضافة
،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،،، ،،،،،


الساعة الآن 12:13 PM

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012