blogger mein infinite scrolling kaise add kare

मित्रो मैने आप लोगो को ब्लागर ब्लाग के पिछले आर्टिकल यह बताया था कि ब्लागर ब्लाग में नम्बर पेज नेविगेशन बटन कैसे लगाये। और आज के इस आर्टिकल में आप लोगो को नम्बर पेज नेविगेशन के ही एक उन्नत विकल्प की जानकारी देने जा रहे है। ब्लॉगर आपको अपने मुखपृष्ठ पर पेजो की संख्या निर्धारित करने के लिए एक अच्छा विकल्प देता है ।आप बस  एक नंबर देते हैं और फिर आप अपने होमपेज पर संख्याओं को नियंत्रित कर सकते हैं। इसके अलावा आप अपने टेम्प्लेट को डायनामिक व्यू में भी बदल सकते हैं, जो आपके विजिटरो को एक बार स्क्रॉल करके आपके सभी पोस्ट को देखने की सुविधा प्रदान करता है। लेकिन, डायनामिक टेम्प्लेट में अन्य ब्लॉगर टेम्प्लेट की तुलना में अधिक समस्या होती है। लेकिन फिर भी कुछ लोग उस अनंत स्क्रॉल विकल्प के कारण डायनामिक टेम्पलेट्स का उपयोग करते हैं। हालांकि आपने फेसबुक, ट्विटर या इन्स्ट्राग्राम पर स्वचालित रूप से पुराने पोस्ट पेज को नीचे स्क्रॉल करने पर पुराने पोस्ट लोड करने का विकल्प होता है। यानि कि अनंत क्रॉलिंग के कार्यान्वयन को देखा होगा। पुराने/नए पोस्ट लिंक दिखाने के बजाय, पृष्ठ को नीचे स्क्रॉल करके हम गतिशील रूप से पोस्ट लोड कर सकते हैं। यह आर्टिकल आपको जानकारी उपलब्ध करायेगा कि कैसे अजाक्स आधारित लोडिंग स्क्रिप्ट को लागू किया जाए, जो ब्लॉगर में लोड मोर पोस्ट या अनंत स्क्रॉलिंग को जोड़ देगा, ताकि विजिटर पृष्ठ को फिर से लोड किए बिना आसानी से नेविगेट कर सकें।

अनंत स्क्रॉल क्या है?

अनंत स्क्रॉलिंग आपके विजिटरो को मुखपृष्ठ पर आपकी पोस्ट को बस नीचे स्क्रॉल करके देखने देता है। यह आपके सभी पोस्ट को एक साथ लोड नहीं करता है। बल्कि आपके मुखपृष्ठ पर आपके द्वारा सेट किए गए पोस्ट की संख्या केवल लोड होगी, लेकिन जब कोई विजिटर नीचे स्क्रॉल करेगा तो अन्य पोस्ट  आटो मेटिक लोड करना शुरू कर देंगे।

अनंत स्क्रॉल कैसे कार्य करता है ? 

आपके पास लोड मोर पोस्ट बटन जोड़ने या स्वचालित रूप से पुराने पोस्ट पेज को नीचे स्क्रॉल करने पर पुराने पोस्ट लोड करने का विकल्प होता है। जिसे एक बार लागू होने के बाद, लोड और अधिक पोस्ट  अनंत स्क्रॉलिंग इंडेक्स पेज (होमपेज, आर्काइव, लेबल पेज) पर सभी ब्लॉगर पोस्ट पर लागू होती है। इसे अलग-अलग पोस्ट पर नहीं जोड़ा जा सकता है।

ब्लॉगर ब्लाग में अनंत स्क्रॉल नेविगेशन कैसे एड करे 

मित्रो यदि आप अपने ब्लागर ब्लाग में अधिक लोड ( infinite scrolling) को एड करना चाहते है। तो इसके लिए सबसे पहले यह जान ले कि यह अधिक लोड ( infinite scrolling) अनंत स्क्रॉल सभी ब्लॉगर थीम के लिए उपयुक्त नहीं है। डिफॉल्ट थीम के लिए इस नेविगेशन का उपयोग करना ठीक है।  आपको इसे ब्लागर ब्लाग में एड करने के लिए दिये गये स्टेप को फालो करना होगा। 

दिशा-निर्देश संख्या 01

01- सबसे पहले आप नीचे दिये गये  ब्लाग में अधिक लोड (infinite scrolling) के कोड को  </body>  में लगाने के लिए  कापी पेस्ट कर ले । 

<script> (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); </script> <script type='text/javascript'> jQuery.ias({ container : '.blog-posts', item: '.post-outer', pagination: '#blog-pager', next: '#blog-pager-older-link a', loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghApaD5A92hzWFVHaI42-JrExebrAK_Lxu7ArGc6JMkZojpoVL8Ss15K2SkSRnsMHG-p06WlVIQ6xJXl5AlhRDfKZHz7PN-Q1RSb-fyE_nRPDHD-UzzzZkYUtCZBEfmXXJPTspydoEHvI/s1600/preloader+%25284%2529.gif' }); </script>

02- यदि आप चाहे तो नीचे दिये गये ब्लाग में अधिक लोड (infinite scrolling) के कोड  को  </body>  में लगाने के लिए सुरक्षित वायरस मुक्त क्लिक कर डाउनलोड भी कर सकते है।

• [[अधिक लोड (infinite scrolling) कोड को डाउनलोड कर ले ]]

स्टेप-संख्या-02

• इसके लिए आप सबसे पहले अपने ब्लाग डेशर्बोड को लागिंन करे। 
• अब आप Theme पर क्लिक करे। 
• अब आप Customize पर क्लिक करे। 
• अब आप EDIT HTML  पर क्लिक करे इसके बाद एक नया पप अप विंडो ओपन होगा । 

स्टेप-संख्या-03

• Theme Coding Open  होने के बाद अब आप की बोर्ड पर CTRL+F दबाकर सर्च बॉक्स में </body>  टाइप  करके Enter करें।
• इसके बाद अब बस इस code को </body> के ऊपर  दिए गए code को  paste  कर दे ।

नोट- अब आपका </body> के ऊपर दिया गया कोड सफलता पूर्वक एड हो चूका है । अब आपको दूसरा कोड </head> के ऊपर एड करना है अब चलिये अगले स्टेप पर  कार्य करते है । 

दिशा-निर्देश संख्या 01

01- सबसे पहले आप नीचे दिये गये  ब्लाग में अधिक लोड (infinite scrolling) के कोड को  </head> में लगाने के लिए  कापी पेस्ट कर ले । 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

02- यदि आप चाहे तो नीचे दिये गये ब्लाग में अधिक लोड (infinite scrolling) के कोड  को  </head>  में लगाने के लिए सुरक्षित वायरस मुक्त क्लिक कर डाउनलोड भी कर सकते है।

[[अधिक लोड(infinite scrolling)कोड को डाउनलोड कर ले]]

स्टेप-संख्या-02

• अब आप कीबोर्ड पर CTRL+F दबाकर सर्च बॉक्स में </head>  टाइप  करके Enter करें।
• इसके बाद अब बस इस code को </head> के ऊपर  दिए गए code को  paste  कर दे । 

एनिमेशन के लिए प्रीलोडर के कोड में बदलाव कैसे करे ?

यदि आप चाहे तो ऊपर </body > सेक्शन में एनिमेशन के लिए लाल रंग से घेरे गये कोड में बदलाव कर सकते है। इस बदलाव से अधिक लोड के समय एनिमेशन में बदलाव नजर आयेगा। बदलाव आपको कहा करना है नीचे दिये गये इमेज में स्पष्ट रूप् से देख सकते है। 

डिजाइन एनिमेशन -01

loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPJ3vbsMtKGaHc7m3dyBNc3WJggNlctnn_pcCIywxBwIdgjInQpAXR5Z-Jufj8Hl6klfGr2KHjmu41x1HSJboMPgm-R3h_P3sm48HZED7zwk38e76FssBSzmTkKG3Z2YR0Mtd4KL03e8/s1600/loading+%25282%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif'

डिजाइन एनिमेशन -02

loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSM29SzZ_QLZH0bqfxUu4QUVDTK3-IT63QtWZXwObaGKDd6L8yeP95KVeqM6zWX8ifLN0966bhIDIGJTNNI7m74JZUpYK-AigiRLg5lHp7FVMhyphenhyphenv5Yebw_Oduet6UfxA2Uq9tJan_MASA/s1600/loading+%25283%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif'

डिजाइन एनिमेशन -03

loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8KcJeAqbPaco62Xn_WVAQnzlqlOkKnGhmnoYifBM74YlygLQjrn1vDaZMK-mJLs93UCXX1LhIkoFrJ-ktPq1dv2-t_uz8fpIRVfWWo3ZdmL4b3SPXnxDa2N5ItOkrnHxOR3FaPy-1sc/s1600/Preloader_10+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif'

मित्रो अब हमे उम्मीद है कि आप लोगो ने आर्टिकल को अच्छे से पढ कर ब्लागर ब्लाग में अधिक लोड ( infinite scrolling ) को अपने ब्लाग में सफलता पूवर्क एड कर लिया होगा। फिर भी यदि कोई समस्या  महसूस होता है तो आप हमसे कमेन्ट करके पूछ सकते है जिससे आपके समस्या का निदान किया जा सके या हमारे ईमेल gondalivenews@gmail.com या दूरभाष 8303799009 पर सम्पर्क कर सकते है।