salima
11-01-2013, بتوقيت غرينيتش 08:24 AM
السلام عليكم ورحمة الله وبركاته
اليوم جايب لكم كود code الانتقال لاعلى الصفحة وهو كود code ظروري لاصحاب المواقع الطويلة http://www.dzbatna.com/images/smilies/cupidarrow.gif
الكود code للجميع يستفيد منه وهو باستخدام خاصية jQuery
http://1.bp.blogspot.com/_fQliT1HyqQc/SpCmqC2yjjI/AAAAAAAAAr4/eFIsBgGBjw8/s400/totop.png (http://1.bp.blogspot.com/_fQliT1HyqQc/SpCmqC2yjjI/AAAAAAAAAr4/eFIsBgGBjw8/s1600-h/totop.png)
أغلب مدونات ووردبريس Wordpress تستعمل إضافة Wp To Top (http://wordpress.org/extend/plugins/wp-to-top/) لوضع رابط الانتقال إلى أعلى الصفحة بطريقة سلسة.
و صاحب هذه الإضافة اعتمد على هذه الطريقة jQuery topLink Plugin (http://davidwalsh.name/jquery-top-link) لإنشاء هذه الإضافة الممتازة و اعتماداعلى نفس الموضوع
سندرج هذه الإضافة في مدونات بلوجر و يمكن كذلك استعمال الطريقة ذاتها لإدراجها في أي موقع أو صفحة ويب.
بسم الله نبدأ
طريقة الإضافة في مدونات بلوجر
أولا من لوحة التحكم نتوجه إلى صفحة تحرير Html ثم نبحث عن
رمز Code:
]=]=></b:skin>
و مباشرة تحتها نضيف الكود code الموالي
رمز Code:
<script src='http://simo.eb2a.com/jQ2top/jquery-1.3.2.js' type='text/javascript'/> <script src='http://simo.eb2a.com/jQ2top/jquery.scrollTo-1.4.0-min.js' type='text/javascript'/> <script type='text/javascript'> jQuery.fn.topLink = function(settings) { settings = jQuery.extend({ min: 1, fadeSpeed: 200, ieOffset: 50 }, settings); return this.each(function() { //listen for scroll var el = $(this); el.css('display','none'); //in case the user forgot $(window).scroll(function() { if(!jQuery.support.hrefNormalized) { el.css({ 'position': 'absolute', 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset }); } if($(window).scrollTop() >= settings.min) { el.fadeIn(settings.fadeSpeed); } else { el.fadeOut(settings.fadeSpeed); } }); }); }; $(document).ready(function() { $('#top-link').topLink({ min: 400, fadeSpeed: 500 }); //smoothscroll $('#top-link').click(function(e) { e.preventDefault(); $.scrollTo(0,300); }); }); </script>
* الرابطين المشار إليهما باللون الأزرق هما لمكتبة ال jQuery و سكريبت script الانتقال لأعلى الصفحة ، يجب إعادة رفعهما و استبدال رابطيهما في الكود code
لأني لا أضمن بقاءهما في الاستضافة HOTING المجاني freeة . تحميل الملفين (http://sites.google.com/site/simoxisite/Home/totopscript.zip?attredirects=0) تم ارفاق الملفين ...http://www.dzbatna.com/images/smilies/cupidarrow.gif
ثم فوق هذا الكود code مباشرة
رمز Code:
]=]=></b:skin>
نضيف كود code ال css هذا، و من خلاله يمكن تعديل شكل زر الصعود لأعلى الصفحة حيث يمثل اللون الأحمر إطار الزر بينما الأخضر للون خلفيته.
رمز Code:
#top-link { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; }
بعد ذلك نضع كود code ال XHTML الموالي بين وسمي body ، مثلا مباشرة فوق </body> و نحفظ القالب template.
رمز Code:
<a href='#top' id='top-link'>إلى الأعلى</a>
طريقة الإضافة في مدونات ووردبريس
كما ذكرت سابقا فالأمر سهل لمدونات ووردبريس و الطريقة كالآتي
1 - تحميل الإضافة من هنا Wp To Top (http://wordpress.org/extend/plugins/wp-to-top/)
2 - فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
3 - تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة blog .
طريقة الإضافة في باقي المواقع
تشبه تقريبا الطريقة المخصصة لبلوجر ، فتكون بزرع السكريبت script و كود codeي css و xhtml في القالب template.
رمضان مبارك ، أدخله الله علينا و عليكم بعميم العافية و جزيل العطاء و التواب و صلى الله و سلم على حبيبنا المصطفى الأمين.
صفحة الموضوع الاصلي مدونة blog ذؤيب (http://doaib.blogspot.com/2014/08/jquery.html)
بس أنا عني طلب من الأخوان http://www.dzbatna.com/images/smilies/blushing.gif
انا حاولت اسويها في صفحة هتمل عشان اركبها في موقعي ما عرفت ياليت اللي عنده الوقت يسويها في صفحة هتمل ويرفقها في الموضوع كرد وشكرا
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif to top script.zip (http://www.traidnt.net/vb/attachments/409483d1252560870-top-script.zip) (36.1 كيلوبايت, عدد مرات المشاهدة 61 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
اليوم جايب لكم كود code الانتقال لاعلى الصفحة وهو كود code ظروري لاصحاب المواقع الطويلة http://www.dzbatna.com/images/smilies/cupidarrow.gif
الكود code للجميع يستفيد منه وهو باستخدام خاصية jQuery
http://1.bp.blogspot.com/_fQliT1HyqQc/SpCmqC2yjjI/AAAAAAAAAr4/eFIsBgGBjw8/s400/totop.png (http://1.bp.blogspot.com/_fQliT1HyqQc/SpCmqC2yjjI/AAAAAAAAAr4/eFIsBgGBjw8/s1600-h/totop.png)
أغلب مدونات ووردبريس Wordpress تستعمل إضافة Wp To Top (http://wordpress.org/extend/plugins/wp-to-top/) لوضع رابط الانتقال إلى أعلى الصفحة بطريقة سلسة.
و صاحب هذه الإضافة اعتمد على هذه الطريقة jQuery topLink Plugin (http://davidwalsh.name/jquery-top-link) لإنشاء هذه الإضافة الممتازة و اعتماداعلى نفس الموضوع
سندرج هذه الإضافة في مدونات بلوجر و يمكن كذلك استعمال الطريقة ذاتها لإدراجها في أي موقع أو صفحة ويب.
بسم الله نبدأ
طريقة الإضافة في مدونات بلوجر
أولا من لوحة التحكم نتوجه إلى صفحة تحرير Html ثم نبحث عن
رمز Code:
]=]=></b:skin>
و مباشرة تحتها نضيف الكود code الموالي
رمز Code:
<script src='http://simo.eb2a.com/jQ2top/jquery-1.3.2.js' type='text/javascript'/> <script src='http://simo.eb2a.com/jQ2top/jquery.scrollTo-1.4.0-min.js' type='text/javascript'/> <script type='text/javascript'> jQuery.fn.topLink = function(settings) { settings = jQuery.extend({ min: 1, fadeSpeed: 200, ieOffset: 50 }, settings); return this.each(function() { //listen for scroll var el = $(this); el.css('display','none'); //in case the user forgot $(window).scroll(function() { if(!jQuery.support.hrefNormalized) { el.css({ 'position': 'absolute', 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset }); } if($(window).scrollTop() >= settings.min) { el.fadeIn(settings.fadeSpeed); } else { el.fadeOut(settings.fadeSpeed); } }); }); }; $(document).ready(function() { $('#top-link').topLink({ min: 400, fadeSpeed: 500 }); //smoothscroll $('#top-link').click(function(e) { e.preventDefault(); $.scrollTo(0,300); }); }); </script>
* الرابطين المشار إليهما باللون الأزرق هما لمكتبة ال jQuery و سكريبت script الانتقال لأعلى الصفحة ، يجب إعادة رفعهما و استبدال رابطيهما في الكود code
لأني لا أضمن بقاءهما في الاستضافة HOTING المجاني freeة . تحميل الملفين (http://sites.google.com/site/simoxisite/Home/totopscript.zip?attredirects=0) تم ارفاق الملفين ...http://www.dzbatna.com/images/smilies/cupidarrow.gif
ثم فوق هذا الكود code مباشرة
رمز Code:
]=]=></b:skin>
نضيف كود code ال css هذا، و من خلاله يمكن تعديل شكل زر الصعود لأعلى الصفحة حيث يمثل اللون الأحمر إطار الزر بينما الأخضر للون خلفيته.
رمز Code:
#top-link { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; }
بعد ذلك نضع كود code ال XHTML الموالي بين وسمي body ، مثلا مباشرة فوق </body> و نحفظ القالب template.
رمز Code:
<a href='#top' id='top-link'>إلى الأعلى</a>
طريقة الإضافة في مدونات ووردبريس
كما ذكرت سابقا فالأمر سهل لمدونات ووردبريس و الطريقة كالآتي
1 - تحميل الإضافة من هنا Wp To Top (http://wordpress.org/extend/plugins/wp-to-top/)
2 - فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
3 - تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة blog .
طريقة الإضافة في باقي المواقع
تشبه تقريبا الطريقة المخصصة لبلوجر ، فتكون بزرع السكريبت script و كود codeي css و xhtml في القالب template.
رمضان مبارك ، أدخله الله علينا و عليكم بعميم العافية و جزيل العطاء و التواب و صلى الله و سلم على حبيبنا المصطفى الأمين.
صفحة الموضوع الاصلي مدونة blog ذؤيب (http://doaib.blogspot.com/2014/08/jquery.html)
بس أنا عني طلب من الأخوان http://www.dzbatna.com/images/smilies/blushing.gif
انا حاولت اسويها في صفحة هتمل عشان اركبها في موقعي ما عرفت ياليت اللي عنده الوقت يسويها في صفحة هتمل ويرفقها في الموضوع كرد وشكرا
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif to top script.zip (http://www.traidnt.net/vb/attachments/409483d1252560870-top-script.zip) (36.1 كيلوبايت, عدد مرات المشاهدة 61 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
