اضافة التمرير اللانهائي لمدونات بلوجر

تأثير التمرير اللانهائي Infinite Scrolling هو اضافة لبلوجر تجعلك عند التمرير تبدأ المواضيع بالظهور هذه الخاصية ممتازة للمدونات التي تعتمد على المواضيع اليومية كالمدونات الإخبارية او المدونات التي تعرض اسعار العملات بشكل يومي او المدونات التي تحتوي عدد قليل من الصفحات فلا تحتاج لإضافة مثلا كالترقيم بل اضافة كالتمرير اللانهائي تكون اكثر تناسقاً معها طبعا لا ننصح بها المدونات التي بها عدد كبير من المواضيع او المدونات التي تحتوي اعلانات او اضافات هامة في الفوتر لأنها ستكون مرهقة للزائر حتى يصل للفوتر لرؤية الإعلانات فسيتم تحميل عدد كبير من الصفحات, و يمكنك معاينة الإضافة من الرابط التالي

معاينــة

كما نرى في المعاينة كلما قمت بالتمرير لأسفل كلما ظهرت مواضيع أكثر

طريقة تركيب الإضافة سهلة للغاية فقط فوق الوسم </body> اضف الكود التالي

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>
<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>

بالنسبة للكود المعلم بالأحمر يمكنك ازالته ان كان في مدونتك رابط مكتبة Jquery

اما الرابط الأزرق هو رابط الصورة التي تظهر عند تحميل الصفحات يمكنك استبداله برابط أي صورة تعجبك

وهذه صور اضافية يمكنك الإختيار منها

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

وبالبحث في جوجل ستجد آلاف الصور
ملحوظة أخيرة ان اردت صورة التحميل تظهر بالمنتصف اضف الكود التالي فوق الوسم ]]></b:skin>

.ias_loader {text-align:center !important;}

وبالتوفيق

اضافة التمرير اللانهائي لمدونات بلوجر كن مدون : موقع متخصص في تطوير منصة بلوجر