
تأثير التمرير اللانهائي Infinite Scrolling هو اضافة لبلوجر تجعلك عند التمرير تبدأ المواضيع بالظهور هذه الخاصية ممتازة للمدونات التي تعتمد على المواضيع اليومية كالمدونات الإخبارية او المدونات التي تعرض اسعار العملات بشكل يومي او المدونات التي تحتوي عدد قليل من الصفحات فلا تحتاج لإضافة مثلا كالترقيم بل اضافة كالتمرير اللانهائي تكون اكثر تناسقاً معها طبعا لا ننصح بها المدونات التي بها عدد كبير من المواضيع او المدونات التي تحتوي اعلانات او اضافات هامة في الفوتر لأنها ستكون مرهقة للزائر حتى يصل للفوتر لرؤية الإعلانات فسيتم تحميل عدد كبير من الصفحات, و يمكنك معاينة الإضافة من الرابط التالي
كما نرى في المعاينة كلما قمت بالتمرير لأسفل كلما ظهرت مواضيع أكثر
طريقة تركيب الإضافة سهلة للغاية فقط فوق الوسم </body> اضف الكود التالي
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>بالنسبة للكود المعلم بالأحمر يمكنك ازالته ان كان في مدونتك رابط مكتبة Jquery
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>
//<![CDATA[
(function(b){b.ias=function(d){var m=b.extend({},b.ias.defaults,d);var c=new b.ias.util();var j=new b.ias.paging();var h=(m.history?new b.ias.history():false);var f=this;r();function r(){j.onChangePage(function(x,v,w){if(h){h.setPage(x,w)}m.onPageChange.call(this,x,w,v)});s();if(h&&h.havePage()){q();pageNum=h.getPage();c.forceScrollTop(function(){if(pageNum>1){l(pageNum);curTreshold=p(true);b("html,body").scrollTop(curTreshold)}else{s()}})}return f}function s(){n();b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;if(curScrOffset>=p()){t(curScrOffset)}}function q(){b(window).unbind("scroll",g)}function n(){b(m.pagination).hide()}function p(v){el=b(m.container).find(m.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();if(!v){treshold+=m.tresholdMargin}return treshold}function t(w,v){urlNextPage=b(m.next).attr("href");if(!urlNextPage){return q()}j.pushPages(w,urlNextPage);q();o();e(urlNextPage,function(y,x){result=m.onLoadItems.call(this,x);if(result!==false){b(x).hide();curLastItem=b(m.container).find(m.item).last();curLastItem.after(x);b(x).fadeIn()}b(m.pagination).replaceWith(b(m.pagination,y));k();s();if(v){v.call(this)}})}function e(w,x){var v=[];b.get(w,null,function(y){b(m.container,y).find(m.item).each(function(){v.push(this)});if(x){x.call(this,y,v)}},"html")}function l(v){curTreshold=p(true);if(curTreshold>0){t(curTreshold,function(){q();if((j.getCurPageNum(curTreshold)+1)<v){l(v);b("html,body").animate({scrollTop:curTreshold},400,"swing")}else{b("html,body").animate({scrollTop:curTreshold},1000,"swing");s()}})}}function u(){loader=b(".ias_loader");if(loader.size()==0){loader=b("<div class='ias_loader'><img src='"+m.loader+"'/></div>");loader.hide()}return loader}function o(v){loader=u();el=b(m.container).find(m.item).last();el.after(loader);loader.fadeIn()}function k(){loader=u();loader.remove()}};function a(c){if(window.console&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",item:".item",pagination:"#pagination",next:".next",tresholdMargin:0,history:true,onPageChange:function(){},onLoadItems:function(){},};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b("html,body").scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=[[0,document.location.toString()]];var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak[0],curPagebreak[1])}d=curPageNum}function c(k){for(i=(e.length-1);i>0;i--){if(k>e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>e[i][0]){return e[i]}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push([k,l])}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)=="#/page/");if(haveState){pageNum=parseInt(window.location.hash.replace("#/page/",""));return{page:pageNum}}}return false};this.updateState=function(g,h,f){if(d){this.replaceState(g,h,f)}else{this.pushState(g,h,f)}};this.pushState=function(g,h,f){if(c){history.pushState({ias:g},h,f)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}d=true};this.replaceState=function(g,h,f){if(c){history.replaceState({ias:g},h,f)}else{this.pushState(g,h,f)}}}})(jQuery)
//
jQuery.ias({
container : '.blog-posts',
item: '.post-outer',
pagination: '#blog-pager',
next: '#blog-pager-older-link a',
loader: 'https://lh4.googleusercontent.com/-GXUCDp06wEg/Ut8KDNxgwrI/AAAAAAAADFM/C_ckl3xjpQs/s64/loading%2520%25282%2529.gif' });
//]]>
</script>
</b:if>
اما الرابط الأزرق هو رابط الصورة التي تظهر عند تحميل الصفحات يمكنك استبداله برابط أي صورة تعجبك
وهذه صور اضافية يمكنك الإختيار منها

https://lh3.googleusercontent.com/-_drS8-wjTC4/Ut8KEoNpZmI/AAAAAAAADFY/b1SYZC6w888/s200/loading%2520%25284%2529.gif

https://lh5.googleusercontent.com/-LqyWW1ad4VE/Ut8KDk5vY9I/AAAAAAAADFQ/5Dj6NN1Slgs/s66/loading%2520%25283%2529.gif

https://lh4.googleusercontent.com/-Ea_bUDMEX9s/Ut8KDKrkq6I/AAAAAAAADFE/-OWPcx8ZBhQ/s128/loading%2520%25281%2529.gif

https://lh3.googleusercontent.com/-2b2nLPvlO78/U03J6WqAr8I/AAAAAAAADwo/jTE6YoGwI5w/s160/hloading.gif

https://lh4.googleusercontent.com/-h2LzfaISzMo/U03NgZhxq0I/AAAAAAAADxA/X8k--ZImc_E/s345/loadingBar.gif

https://lh3.googleusercontent.com/-MWLbVQPdpTs/U03NgQBIYnI/AAAAAAAADxE/FX0FbXhlNsE/s400/loading_bar.gif
وبالبحث في جوجل ستجد آلاف الصور
ملحوظة أخيرة ان اردت صورة التحميل تظهر بالمنتصف اضف الكود التالي فوق الوسم
.ias_loader {text-align:center !important;}
وبالتوفيق
السلام عليكم ورحمة الله وبركاته
ردحذفإضافة مميزة من مدون مبدع
أشكرك أخي الغالي عمرو وجزاك الله كل خير
دمت في حفظ الله ورعايته
وعليكم السلام ورحمة الله وبركاته
حذفدائما ما تكون في صدارة المعلقين أخي الغالي بدر
ربي يحفظك يا طيب
وتحياتي لك
طرحت فأبدعت أخي فعلاً أضافة مذهلة, مشكووور
ردحذفحياك الله أخي محمد وشكراً لمرورك يا طيب
حذفهل من الممكن أن تكون الاضافة على شكل زر مثلاً عندما يريد الزائر رؤية مواضيع أكثر يضغط على الزر لكي تظهر المواضيع وتكون لا نهائية كذلك
حذفهناك طريقة رايتها في احد القوالب عن طريق الضغط لكنها جزء من القالب اى تحتاج لبناء القالب على تلك الطريقة وهذا امر طبعا صعب شرحه لكن ان صادفت طريقة تلقائية كتلك اكيد سأضيفها
حذفشكراً لك ياطيب
حذفالسلام عليكم ورحمة الله وبركاته
ردحذفلدي سؤال بخصوص هذه الإضافة
هل يمكن استخدام هذه الإضافة في صفحة ثابتة ؟
مثلا كألبوم صور في صفحة ثابتة
ومرة أخرى شكرا جزيلا على طرحك المبدع أخي الغالي
في أمان الله وحفظه
وعليكم السلام ورحمة الله وبركاته
حذفحياك الله أخي بدر
بالنسبة لسؤالك يا طيب فلا تنفع هذه الإضافة بالطريقة التي قلتها نظراص لانها تعرض الصفحات المتتابعة وليس اجزاء من الصفحة
شكراً ولله اضاف جميل شكراً ليك
ردحذفأهلاً بك اخي الكريم
حذفتشرفت بمرورك
شكرآ على الاضافه
ردحذفلكن هل يمكن اضافتها للاقسام فقط ؟
أهلا بك أخي ,لا اظن لكن ممكن ان تظهر في صفحات الفهرسة والتي من ضمنها الأقسام وتجنب ظهورها في الصفحة الرئيسية بإضافة هذا السطر قبل الكود
حذف<b:if cond='data:blog.url != data:blog.homepageUrl'>
وهذا بعده
</b:if>
وبإذن الله يعمل
مرحبا خي
ردحذفشكرا على الاضافة
لكن عندما اقوم باضافتها واضغط على عرض المزيد يظهر المواضيع كاملة وكأنه في صفحة الموضوع وليس مقتطف منه
ربما يكون لديك مشكلة في اضافة اقرأ المزيد او المواضيع التالية ثقيلة بعض الشئ فلا تسع تحميل الإضافة
حذفجرب هذه الإضافة ربما تعمل معك بشكل أفضل
http://cnmu.blogspot.com/2014/04/infinite-scrolling-loading-more-posts.html
مرحبا اخي
ردحذفالله يعطيك العافيه على مجهودك الرائع
ولكم اخي هل بالامكانيه شرح لنا كيفيه عملها على صفحه ثابته كالبوم صور
حصلت على الموقع ولكم لا اعرف كيف اضيفها على المدونه
هي الموقع http://www.sitepoint.com/jquery-infinite-scrolling-demos/
جزاء الله كل خير
حياك الله أخي الإضافة مخصصة للمدونات باكملها فقط هناك اضافة اخرى لألبوم الصور لكنها تعتمد على الصور من الفيس بوك راجع هذا الموضوع
حذفhttp://cnmu.blogspot.com/2013/12/Facebook-Photo-Gallery.html
أخي مافائدة هذه الاضافة مع ان بلوجر يحتوي علي ازرار التنقل بين المواضيع بشكل خفيف جدا
ردحذفوهل هذه الاضافة تظهر في الصفحات الثابتة ام أنها تظهر فقط في الصفحة الرئيسية =q
هذه الإضافة تظهر في الرئيسية وتبدأ في إظهارالمواضيع تلقائياً عند التمرير هناك من يفضلها كطريقة للتسهيل على الزائر التصفح
حذفوهناك من يفضل الطريقة الخفيفة التقليدية الأمر اختياري وبالتوفيق يا طيب
هل من الممكن تغيير صورة التحميل بأيقونة خط من Fontawesome مثلاً, كيف أستطيع قعل ذلك ؟
ردحذفيمكن أخي جربا لعمل طبقاً للكلاس .ias_loader
حذففإن كانت لديك خبرة بسيطة بتلك الامور ستتمكن من عمله لا أستطيع تقديمه لانه من امور الدعم الفني التي لا اقدمها عبر المدونة
شكراً جزيلاً
حذفالكود لايعمل وعند الدخول الى احد الاقسام والنزول تصبح الصفحة بيضاء مع ظهور صورة صغيرة من المقال
ردحذفربما يكون لديك اصدار قديم من جيكويري الرابط المعلم بالأحمر أو اصدار جديد او هناك تداخل بين آداة أخرى
حذففهذه الآداة قد لا تناسب كل القوالب