admin
10-31-2013, بتوقيت غرينيتش 05:58 AM
http://www.dzbatna.com/images/icons/icon30.gif طµظ†ط¯ظˆظ‚ ط¥ط¹ط¬ط§ط¨ ط§ظ„ظپط§ظٹط³ط¨ظˆظƒ ط¨طھظ‚ظ†ظٹط© ط§ظ„ظ€ LightBox (http://www.dzbatna.com/t2110910/)
السلام عليكم و رحمة الله و بركاته،
اليوم إن شاء الله سوف أقدم لكم مهارة بسيطة من مهارات الـ JavaScript، الأمر يتعلق بطريقة عرض صندوق إعجاب الفايسبوك بتقنية الـ LightBox، و هي تقنية معروفة جدا في عرض الصور، إلا أنها أصبحت تستخدم في مجالات عديدة لجلب إنتباه الزوار لأمر معين، أو حدث خاص، بل و أصبحت تستخدم حتى في عرض بعض الإعلانات الدعائية.
مميزات الإضافة :
خفيفة، سهلة التركيب install؛
احتواؤها على زر إغلاق؛
تصميم بسيط و أنيق.
سلبيات الإضافة :
لا تدعم كل المتصفحات، فقط : Chrome، Firefox، Safari.
للمعاينة المباشرة (http://www.deltaclic.com/demo/tuto/flightbox.html)
ملاحظة : في المثال يمكن أن تجد صفحة الإعجاب فارغة، لأنه ربما لم يسجل أي شخص إعجابه بصفحاتنا بعد. سجل اعجابك فقط، حتى يكون المثال واضح بشكل جيد، شكرا.
طريقة الاستخدام :
طريقة الاستخدام سهلة للغاية، فقط ضع الكود code التالي بالمكان الذي تريد ظهور الإضافة به :
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- بداية الكود code -->
<link rel="stylesheet" type="text/css" href="https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dfbpopup.css" />
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script type="text/javascript" src="https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=flase') == -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:"#mdfb"});
}
});
</script>
<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#fff;'>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fd eltaclic&width=300&colorscheme=light&show_faces=tr ue&border_color=%23ffffff&stream=false&header=fals e&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;"></iframe>
</center><p style=" float:right; margin-right:3px; font-size:12px; font-family:Tahoma;" >تصميم <a style=" font-size:12px; font-family:Tahoma; color:#3B78CD; text-decoration:none;" href="http://www.deltaclic.com">دلتا كلـك</a></p>
</div></div>
<!-- نهاية الكود code -->
</code> </code>
ابحث داخل الكود code عن الكلمة deltaclic و غيرها إلى يوزر نيم صفحة الإعجاب الخاصة بك.
ملاحظة : يمكنك إزالة عبارة "تصميم دلتا كلك" من الإضافة.
هذا كل شيء، إن شاء الله ستكون هناك مهارات أخرى في القريب القادم. بالتوفيق.
التعديل الأخير كان بواسطة DeltaClic; 23 - 06 - 2014 الساعة 17:43
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم و رحمة الله و بركاته،
اليوم إن شاء الله سوف أقدم لكم مهارة بسيطة من مهارات الـ JavaScript، الأمر يتعلق بطريقة عرض صندوق إعجاب الفايسبوك بتقنية الـ LightBox، و هي تقنية معروفة جدا في عرض الصور، إلا أنها أصبحت تستخدم في مجالات عديدة لجلب إنتباه الزوار لأمر معين، أو حدث خاص، بل و أصبحت تستخدم حتى في عرض بعض الإعلانات الدعائية.
مميزات الإضافة :
خفيفة، سهلة التركيب install؛
احتواؤها على زر إغلاق؛
تصميم بسيط و أنيق.
سلبيات الإضافة :
لا تدعم كل المتصفحات، فقط : Chrome، Firefox، Safari.
للمعاينة المباشرة (http://www.deltaclic.com/demo/tuto/flightbox.html)
ملاحظة : في المثال يمكن أن تجد صفحة الإعجاب فارغة، لأنه ربما لم يسجل أي شخص إعجابه بصفحاتنا بعد. سجل اعجابك فقط، حتى يكون المثال واضح بشكل جيد، شكرا.
طريقة الاستخدام :
طريقة الاستخدام سهلة للغاية، فقط ضع الكود code التالي بالمكان الذي تريد ظهور الإضافة به :
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- بداية الكود code -->
<link rel="stylesheet" type="text/css" href="https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dfbpopup.css" />
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script type="text/javascript" src="https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=flase') == -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:"#mdfb"});
}
});
</script>
<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#fff;'>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fd eltaclic&width=300&colorscheme=light&show_faces=tr ue&border_color=%23ffffff&stream=false&header=fals e&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;"></iframe>
</center><p style=" float:right; margin-right:3px; font-size:12px; font-family:Tahoma;" >تصميم <a style=" font-size:12px; font-family:Tahoma; color:#3B78CD; text-decoration:none;" href="http://www.deltaclic.com">دلتا كلـك</a></p>
</div></div>
<!-- نهاية الكود code -->
</code> </code>
ابحث داخل الكود code عن الكلمة deltaclic و غيرها إلى يوزر نيم صفحة الإعجاب الخاصة بك.
ملاحظة : يمكنك إزالة عبارة "تصميم دلتا كلك" من الإضافة.
هذا كل شيء، إن شاء الله ستكون هناك مهارات أخرى في القريب القادم. بالتوفيق.
التعديل الأخير كان بواسطة DeltaClic; 23 - 06 - 2014 الساعة 17:43
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
