ब्लॉगर पर एक स्क्रॉल करने योग्य पोस्ट कैसे बनाएं?
जब आप अपने ब्लॉगर ब्लॉग पोस्ट को एक स्क्रॉल बॉक्स मे रखते हैं, तो आप अपनी प्रविष्टियों को स्क्रॉल पट्टी के साथ निर्दिष्ट स्थान पर प्रदर्शित करते हैं। इस तरह, आपके ग्राहकों को पृष्ठ की लंबाई के माध्यम से स्क्रॉल करने की आवश्यकता नहीं है, लेकिन इसके बजाय, वे केवल प्रविष्टि के माध्यम से स्क्रॉल करते हैं। यह सुविधा विशेष रूप से उपयोगी है यदि आपके पास अपने व्यवसाय स्थल पर बड़ी मात्रा में सामग्री है और आप स्थान बचाना चाहते हैं। कैस्केडिंग स्टाइल शीट में परिवर्तन करने के लिए अपने खाते के "HTML संपादित करें" सुविधा का उपयोग करें - या सीएसएस - कोड जो आपके पोस्ट डिस्प्ले को प्रबंधित करता है।
चरण 1
अपने ब्लॉगर खाते में प्रवेश करें, अपने ब्लॉग के नाम पर क्लिक करें और फिर "टेम्पलेट" लिंक पर क्लिक करें। "HTML संपादित करें" बटन पर क्लिक करें, फिर अपने ब्लॉग के HTML कोड को लाने के लिए "आगे बढ़ें" बटन पर क्लिक करें।
चरण 2
अपने ब्राउज़र के खोज बॉक्स को सक्रिय करने के लिए उसी समय "Ctrl-F" दबाएं। अपने ब्लॉग प्रविष्टियों को नियंत्रित करने वाले CSS कोड को हाइलाइट करने के लिए ".post" या ".post-external" टाइप करें।
चरण 3
अपने कर्सर को घुंघराले कोष्ठक के अंदर रखें और "ऊँचाई: 200px;" और "अतिप्रवाह: स्क्रॉल?" इस तरह:
.post {ऊँचाई: 200px; अतिप्रवाह: स्क्रॉल; }
ऊँचाई मान आपकी पोस्ट को ऊपर से नीचे तक छोटा बनाता है, जबकि ओवरफ़्लो की "स्क्रॉल" संपत्ति यह सुनिश्चित करती है कि जब आपकी पोस्ट सामग्री ऊँचाई मान से अधिक हो, तो स्क्रॉल बार डिस्प्ले।
चरण 4
स्क्रॉल बॉक्स में अपनी पोस्ट देखने के लिए "पूर्वावलोकन" बटन पर क्लिक करें। यदि संतुष्ट हैं, तो अपने परिवर्तनों को प्रकाशित करने के लिए "टेम्पलेट सहेजें" बटन पर क्लिक करें। अन्यथा, अपनी वरीयता के आधार पर, "ऊँचाई" प्रविष्टि को छोटा या बड़ा करने के लिए मान को संपादित करें।
ब्लॉगर पर एक स्क्रॉल करने योग्य पोस्ट कैसे बनाएं?
कोड जारी करने और यहां हैक करने के बाद, यहां हम एक और एक हैं और इस बार हम आपके पृष्ठ को नीचे स्क्रॉल करने के साथ असीमित पृष्ठ स्क्रॉल करने के लिए आपके ब्लॉग को बदलने जा रहे हैं। जब आप या आपका आगंतुक आपके ब्लॉग को ब्राउज़ करेंगे और आपके पहले पृष्ठ को देखने के बाद, आपको NextPage बटन पर क्लिक करने की आवश्यकता नहीं है, क्योंकि नीचे पहुंचने के बाद, यह स्वचालित रूप से आपके पहले पृष्ठ में अगले पृष्ठ पोस्ट लोड करेगा और अधिक नीचे स्क्रॉल करने के बाद, यह लोड होगा अगले पृष्ठ पर स्वचालित रूप से और इतने पर…
इस कोड के माध्यम से आप उस "अगला" बटन पर क्लिक करने के लिए बहुत थक नहीं जाएंगे, बस बाकी पदों को देखने के लिए? कई अन्य ने भी इसे पोस्ट किया है और आमतौर पर इसे वेब डिज़ाइन में 'अनंत स्क्रॉलिंग' कहा जाता है। SEO के बारे में चिंता न करें क्योंकि यह आपके ब्लॉग लोडिंग समय को नहीं खाएगा। आपका ब्लॉगर पृष्ठदृश्य भी रिकॉर्ड करेगा। यह आपको मुख्य पृष्ठ पर अपने आगंतुक समय को बढ़ाने में भी मदद करेगा जो कि नए व्हाइटहैट एसईओ में इतना महत्वपूर्ण है।
अब इस ट्यूटोरियल में हमारे पास आपके ब्लॉग मुखपृष्ठ पर देखी जाने वाली पोस्टों के लिए एक नया तरीका है, अर्थात् अनंत स्क्रॉल। कुछ समय के लिए वेब डिज़ाइन में एक लोकप्रिय ट्रेंड रहा है और अब आप इसे अपने ब्लॉगर ब्लॉगों पर दे सकते हैं। ब्लॉगर पर हम एक नया पृष्ठ पोस्ट करने के लिए डिफ़ॉल्ट रूप से 'पिछला' और 'अगला' बटन दबाएं। अब यह ट्यूटोरियल ब्लॉगर ब्लॉग्स में अनंत स्क्रॉल जोड़ने के साथ एक और कदम उठाता है।
अन्य में से कई में यह कोड है, लेकिन यह कोड ब्लॉगर पोस्ट के लिए ऑटो इमेज थम्बनेल और रीडमोर लिंक के साथ जटिल है। इसलिए इसकी चिंता मत करो।
आप हमारे होमपेज पर डेमो की जांच कर सकते हैं क्योंकि हम इसका उपयोग कर रहे हैं। डेमो में हमारे पास तीन पेज पोस्ट दिखाने के लिए होमपेज सेट है, जब आप पोस्ट के अंत में स्क्रॉल करते हैं तो आपको "अधिक पोस्ट लोड करें" लिंक दिखाई देगा। यदि आप स्क्रॉल करते रहेंगे तो अधिक पोस्ट अपने आप लोड हो जाएंगे। तो अब इसे जोड़ने का समय आ गया है लेकिन कोड प्राप्त करने से पहले नीचे दी गई सुविधाओं की सूची देखना न भूलें।
विशेषताएं:
1.) जावास्क्रिप्ट और JQuery कोडित।
2.) १.६.१ जोड़ा गया।
3.) आपके लोड समय को ठीक रखने के लिए कोई बाहरी फ़ाइल नहीं जोड़ी गई।
4.) Jquery को आधिकारिक CDN नेटवर्क पर होस्ट किया गया है, इसलिए इसके बारे में चिंता न करें।
5.) सरल और स्वच्छ कोड।
6.) स्वचालित रूप से अनंत करने के लिए अपने पोस्ट स्क्रॉल करेंगे।
7.) आपके पेजव्यूज ब्लॉगर में काउंट होंगे।
8.) अपने वांछित पृष्ठ तक पहुँचने के बाद ऑटो स्क्रॉल करना बंद कर देगा।
9.) एक बटन बंद करो ऑटो स्क्रॉलिंग के बाद अधिक पोस्ट लोड करने के लिए दिखाई देगा।
10.) ऑटो स्क्रॉलिंग स्टॉप आपकी विजिटर को बढ़ाने के लिए आपकी क्लिक काउंट को बढ़ाने और आपका पाद दिखाने के लिए जोड़ा गया है।
11.) पूरी तरह से अनुकूलन सीएसएस।
12.) आप पाठ और लोडिंग की छवि को बदल सकते हैं।
13.) इस स्क्रिप्ट में और भी खूबियाँ जोड़ी गई हैं।
14.) ऑटो रीडमोर और थंबनेल कोड पर भी काम करेगा।
15.) ब्लॉगर डायनामिक टेम्प्लेट स्टाइल को अपनाया।
16.) एसईओ अनुकूलित।
17.) लोड करने के लिए त्वरित और स्थापित करने में आसान।
18.) आपके पृष्ठ पर प्रभाव नहीं पड़ेगा पाठ / छवि लोड हो रही है।
19.) पोस्ट पेज पर काम नहीं करेगा। केवल होम पेजेज, लेबलपेज, सर्चपेज के लिए असीमित पोस्ट दिखाएंगे।
20.) इन पृष्ठों में स्वचालित रूप से अगला / पिछला लिंक छिपाएँ।
Blogspot में कैसे Add करें?
1.) अपने www.blogger.com पर जाएं
2.) अपनी इच्छा "ब्लॉग" खोलें।
3.) "टेम्पलेट" पर जाएं।
4.) "HTML संपादित करें" पर क्लिक करें।
5.) अब कोड बॉक्स के भीतर क्लिक करें।
6.) प्रेस [CTRL + F] सर्च करने के लिए </ body> कोड।
7.) अब नीचे दिए गए कोड को कॉपी करें और </ body> कोड से पहले पेस्ट करें।
8.) "टेम्पलेट सहेजें" पर क्लिक करें और किया।
<b:if cond='data:blog.pageType == "index"'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
(function($){'use strict';Date.now=Date.now||function(){return+new Date()};$.ias=function(g){var h=$.extend({},$.ias.defaults,g);var i=new $.ias.util();var j=new $.ias.paging(h.scrollContainer);var k=(h.history?new $.ias.history():false);var l=this;function init(){var d;j.onChangePage(function(a,b,c){if(k){k.setPage(a,c)}h.onPageChange.call(this,a,c,b)});reset();if(k&&k.havePage()){stop_scroll();d=k.getPage();i.forceScrollTop(function(){var a;if(d>1){paginateToPage(d);a=get_scroll_threshold(true);$('html, body').scrollTop(a)}else{reset()}})}return l}init();function reset(){hide_pagination();h.scrollContainer.scroll(scroll_handler)}function scroll_handler(){var a,scrThreshold;a=i.getCurrentScrollOffset(h.scrollContainer);scrThreshold=get_scroll_threshold();if(a>=scrThreshold){if(get_current_page()>=h.triggerPageThreshold){stop_scroll();show_trigger(function(){paginate(a)})}else{paginate(a)}}}function stop_scroll(){h.scrollContainer.unbind('scroll',scroll_handler)}function hide_pagination(){$(h.pagination).hide()}function get_scroll_threshold(a){var b,threshold;b=$(h.container).find(h.item).last();if(b.size()===0){return 0}threshold=b.offset().top+b.height();if(!a){threshold+=h.thresholdMargin}return threshold}function paginate(d,e){var f;f=$(h.next).attr('href');if(!f){if(h.noneleft){$(h.container).find(h.item).last().after(h.noneleft)}return stop_scroll()}if(h.beforePageChange&&$.isFunction(h.beforePageChange)){if(h.beforePageChange(d,f)===false){return}}j.pushPages(d,f);stop_scroll();show_loader();loadItems(f,function(a,b){var c=h.onLoadItems.call(this,b),curLastItem;if(c!==false){$(b).hide();curLastItem=$(h.container).find(h.item).last();curLastItem.after(b);$(b).fadeIn()}f=$(h.next,a).attr('href');$(h.pagination).replaceWith($(h.pagination,a));remove_loader();hide_pagination();if(f){reset()}else{stop_scroll()}h.onRenderComplete.call(this,b);if(e){e.call(this)}})}function loadItems(b,c,d){var e=[],container,startTime=Date.now(),diffTime,self;d=d||h.loaderDelay;$.get(b,null,function(a){container=$(h.container,a).eq(0);if(0===container.length){container=$(a).filter(h.container).eq(0)}if(container){container.find(h.item).each(function(){e.push(this)})}if(c){self=this;diffTime=Date.now()-startTime;if(diffTime<d){setTimeout(function(){c.call(self,a,e)},d-diffTime)}else{c.call(self,a,e)}}},'html')}function paginateToPage(a){var b=get_scroll_threshold(true);if(b>0){paginate(b,function(){stop_scroll();if((j.getCurPageNum(b)+1)<a){paginateToPage(a);$('html,body').animate({'scrollTop':b},400,'swing')}else{$('html,body').animate({'scrollTop':b},1000,'swing');reset()}})}}function get_current_page(){var a=i.getCurrentScrollOffset(h.scrollContainer);return j.getCurPageNum(a)}function get_loader(){var a=$('.ias_loader');if(a.size()===0){a=$('<div class="ias_loader">'+h.loader+'</div>');a.hide()}return a}function show_loader(){var a=get_loader(),el;if(h.customLoaderProc!==false){h.customLoaderProc(a)}else{el=$(h.container).find(h.item).last();el.after(a);a.fadeIn()}}function remove_loader(){var a=get_loader();a.remove()}function get_trigger(a){var b=$('.ias_trigger');if(b.size()===0){b=$('<center><div class="ias_trigger"><a href="#">'+h.trigger+'</a></div></center>');b.hide()}$('a',b).off('click').on('click',function(){remove_trigger();a.call();return false});return b}function show_trigger(a){var b=get_trigger(a),el;el=$(h.container).find(h.item).last();el.after(b);b.fadeIn()}function remove_trigger(){var a=get_trigger();a.remove()}};$.ias.defaults={container:'.blog-posts',scrollContainer:$(window),item:'.post-outer',pagination:'#blog-pager',next:'#blog-pager-older-link a',loader:'<center><img src="http://www.mountainchalets.com/layout/progress-bar.gif"/></center>',loaderDelay:2000,triggerPageThreshold:2,trigger:'Load More Posts',thresholdMargin:-500,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){ FB.XFBML.parse(); gapi.plusone.go(); twttr.widgets.load(); _gaq.push(['_trackPageview']); },customLoaderProc:false};$.ias.util=function(){var c=false;var d=false;var e=this;function init(){$(window).load(function(){c=true})}init();this.forceScrollTop=function(a){$('html,body').scrollTop(0);if(!d){if(!c){setTimeout(function(){e.forceScrollTop(a)},1)}else{a.call();d=true}}};this.getCurrentScrollOffset=function(a){var b,wndHeight;if(a.get(0)===window){b=a.scrollTop()}else{b=a.offset().top}wndHeight=a.height();return b+wndHeight}};$.ias.paging=function(){var c=[[0,document.location.toString()]];var d=function(){};var e=1;var f=new $.ias.util();function init(){$(window).scroll(scroll_handler)}init();function scroll_handler(){var a,curPageNum,curPagebreak,scrOffset,urlPage;a=f.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(a);curPagebreak=getCurPagebreak(a);if(e!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];d.call({},curPageNum,scrOffset,urlPage)}e=curPageNum}function getCurPageNum(a){for(var i=(c.length-1);i>0;i--){if(a>c[i][0]){return i+1}}return 1}this.getCurPageNum=function(a){a=a||f.getCurrentScrollOffset($(window));return getCurPageNum(a)};function getCurPagebreak(a){for(var i=(c.length-1);i>=0;i--){if(a>c[i][0]){return c[i]}}return null}this.onChangePage=function(a){d=a};this.pushPages=function(a,b){c.push([a,b])}};$.ias.history=function(){var e=false;var f=false;function init(){f=!!(window.history&&history.pushState&&history.replaceState);f=false}init();this.setPage=function(a,b){this.updateState({page:a},'',b)};this.havePage=function(){return(this.getState()!==false)};this.getPage=function(){var a;if(this.havePage()){a=this.getState();return a.page}return 1};this.getState=function(){var a,stateObj,pageNum;if(f){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{a=(window.location.hash.substring(0,7)==='#/page/');if(a){pageNum=parseInt(window.location.hash.replace('#/page/',''),10);return{page:pageNum}}}return false};this.updateState=function(a,b,c){if(e){this.replaceState(a,b,c)}else{this.pushState(a,b,c)}};this.pushState=function(a,b,c){var d;if(f){history.pushState({ias:a},b,c)}else{d=(a.page>0?'#/page/'+a.page:'');window.location.hash=d}e=true};this.replaceState=function(a,b,c){if(f){history.replaceState({ias:a},b,c)}else{this.pushState(a,b,c)}}}})(jQuery);
//]]>
</script>
<script>jQuery.ias();</script>
<style>
.ias_trigger {margin-bottom: 25px;margin-top: 25px;}
.ias_trigger a{padding: 10px;color: #fff;background: #00c4ff;font-weight: bold;text-transform: uppercase;}
</style>
</b:if>
अनुकूलन:
1.) निकालें JQuery 1.9.1 यदि आप पहले से ही यह है।
2.) अपने वांछित छवि लिंक के साथ ब्लू लिंक बदलें जो अगले पृष्ठ पर लोड हो जाएगा।
3.) अपने इच्छित पाठ के साथ लाल पाठ बदलें जो लिंक पर क्लिक करने और अधिक पोस्ट लोड करने के बाद आपके लिंक तक पहुंचने के बाद दिखाई देगा।
4.) इन पृष्ठों को लोड करने के बाद ऑटोलोल्डिंग को रोकने के लिए अपनी इच्छा की गणना के लिए बैंगनी न बदलें।
5.) एक नया पृष्ठ लोड करते समय देरी में आपकी वांछित गणना के साथ भूरा नहीं बदलना / घटाना।
6.) आप चाहते हैं के रूप में सीएसएस बदलें।
7.) सेव एंड डन।
अंतिम शब्द:
हमारे पास बस यही है। अगर आपको अपने ब्लॉगर टेम्पलेट में इस कोड की कोई समस्या है तो अपनी समस्या के बारे में पूरी जानकारी के लिए हमसे बेझिझक संपर्क करें। हम समय के रूप में आप हमें जवाब देंगे। इसे अपने दोस्तों के साथ साझा करना न भूलें ताकि वे भी इसका लाभ उठा सकें और अपनी कीमती प्रतिक्रिया नीचे दिए गए हमारे टिप्पणी फ़ॉर्म में छोड़ दें। हैप्पी ब्लॉगिंग, आप अगले लेख में देखें ...
नमस्कार दोस्तों, मैं Kishor,Technical Kishor का Technical Author And Co-Founder हूँ. मुझे नयी नयी Technology से सम्बंधित चीज़ों को सीखना और दूसरों को सिखाने में बड़ा मज़ा आता है. मेरी आपसे विनती है की आप लोग इसी तरह हमारा सहयोग देते रहिये और हम आपके लिए नईं-नईं जानकारी उपलब्ध करवाते रहेंगे. :) #We Technical Kishor Team Support DIGITAL INDIA
ConversionConversion EmoticonEmoticon