Blogger में Page Numbering or Pagination कैसे करें

नमस्कार दादाभाई, अगर आप Blogger पर Blogging करते हो, तो आपने एक चीज जरूर Notice की होगी। जब आपके Blog पर 14-21 से ज्यादा Posts हो जाते हैं, तो Home Page पर नीचे सिर्फ दो ही Button दिखते हैं - Older Posts और Newer Posts।

अब सोचो दादाभाई, अगर आपके Blog पर 114 Posts हैं और किसी User को आपका 62वां Post देखना है, तो उसको कितनी बार Older Posts पर Click करना पड़ेगा? बहुत ज्यादा ऐसे में  लोग थक जाएगा।

Table of Contents

इसी वजह से User बोर होकर Blog से चला जाता है। यही सबसे बड़ी Problem है और इसी वजह से बहुत सारे Blogs का Bounce Rate बहुत ज्यादा होता है।

इसका Solution है Page Numbering। मतलब 1, 2, 3, 4, 5.... Next, Last वाला System। WordPress में तो ये पहले से होता है, पर Blogger में हमें खुद लगाना पड़ता है। और यही आज हम सीखेंगे।

Page Numbering क्या होता है?

दादाभाई, आसान भाषा में समझो। मान लो आपके Blog पर 115 Post है। अगर सारी 115 Post एक ही Page पर दिखा दोगे तो Page कभी खत्म ही नहीं होगा, User पागल हो जाएगा Scroll करते-करते।

इसीलिए हम Page Numbering लगाते हैं। मतलब Home Page पर सिर्फ 3-5 Post दिखेगी, नीचे लिखा आएगा 1, 2, 3, 4, 5 Next Page। User Next पर Click करेगा तो अगली 5 Post खुल जाएगी।

जैसे किताब में Page Number होता है ना Page 1, Page 2, Page 3 - बिल्कुल वैसे ही।

Pagination से क्या फायदा होता है?

दादाभाई, पहला, Blog Fast खुलता है।

दूसरा, Design साफ-सुथरा लगता है।

तीसरा, Google को समझ आता है कि Blog में Proper Navigation है। हर Professional Blogger यही Use करता है दादाभाई।

अर हम हर आर्टिकल में बोलते हैं Blogger theme editor मे कोई भी changes करने से पहले Backup लेना बहुत जरूरी है दादाभाई।

Theme > Edit HTML में जाने के बाद ऊपर Backup/Restore का Button होगा। पहले अपने Theme का Backup Download कर लो। ताकि कुछ गड़बड़ हो तो वापस ला सको। ये आदत बना लो दादाभाई, Theme में कुछ भी करने से पहले Backup जरूर ले लो। ये बहुत जरूरी है। कई बार छोटी सी गलती से पूरा Theme खराब हो जाता है।

अगर Backup होगा तो आप एक Click में सब ठीक कर सकते हो। मैंने खुद कई बार बिना Backup के काम किया और Theme खराब हो गया, फिर दोबारा सब करना पड़ा। इसलिए आप ये गलती मत करो यार।

दादाभाई, Blogger मे Default Pagination क्यूं अच्छा नहीं है Blogger का जो Default System है, वो 2014 के हिसाब से बनाया गया था। आज के Time में वो बिल्कुल भी User Friendly नहीं है। आज User को सब कुछ Fast और Easy चाहिए।

पहला, User को पता ही नहीं चलता कि Blog में कुल कितने Pages हैं। उसको लगता है बस 5 ही Page हैं।

दूसरा, अगर उसको बीच का कोई Post देखना है तो वो सीधा Jump नहीं कर सकता।

तीसरा, देखने में भी वो बिल्कुल Simple और पुराना लगता है। इससे Blog की Value कम लगती है।

जब आप Numbering वाला Pagination लगाते हो, तो Blog एकदम Professional Website जैसा लगता है। User को लगता है हाँ, ये कोई बड़ी Website है। इसका Trust भी बढ़ता है। और Trust बढ़ेगा तभी User आपके Affiliate Link पर Click करेगा या आपके Blog को बार-बार Visit करेगा।

Blogger Pagination vs WordPress Pagination

दादाभाई, बहुत लोग पूछते हैं कि Blogger और WordPress के Pagination में क्या फर्क है।

WordPress में आपको Plugin मिल जाता है। जैसे WP-Page Navigation। एक Click में Pagination लग जाता है। आपको Code छूने की भी जरूरत नहीं। पर Blogger में ऐसा नहीं है। Blogger में हमें खुद Manual Code डालना पड़ता है। यही Blogger का थोड़ा सा Downside है, पर एक बार Code डाल दिया तो ये WordPress से भी ज्यादा Fast काम करता है क्योंकि ये Lightweight होता है।

WordPress का Plugin आपकी Site को थोड़ा Heavy बना देता है, पर Blogger का ये Code एकदम Lightweight है। इससे आपकी Site की Speed पर कोई असर नहीं पड़ता। यही इसका सबसे बड़ा Plus Point है।

Page Numbering लगाने के 5 बड़े फायदे

1. User Experience (UX) Top हो जाता है।

ये सबसे बड़ा फायदा है दादाभाई। User आपकी Website पर ज्यादा देर तक रहेगा। वो आसानी से एक Page से दूसरे Page पर जा सकेगा। जैसे Amazon, Flipkart में होता है। User को 1,2,3 दिखता है तो वो Click करता है। Bounce Rate भी कम होता है। Google भी उसी Blog को Rank करता है जिसका Bounce Rate कम हो और User ज्यादा देर तक रुके।

2. SEO के लिए बहुत अच्छी है।

Google को भी साफ-सुथरी Pagination वाली Site ज्यादा पसंद आती है। जब Numbering होती है तो Google Bot आपके सारे Pages को आसानी से Crawl कर लेता है। मतलब आपके पुराने Posts भी Index होते रहते हैं। इससे Overall SEO Boost होता है। अगर आपके पुराने Posts Crawl ही नहीं होंगे तो वो Rank कैसे करेंगे? इसलिए ये बहुत जरूरी है।

3. Professional Look आता है।

दादाभाई, Look भी तो Matter करता है। अगर दो Blog हों, एक में सिर्फ Older Posts लिखा हो और दूसरे में सुंदर 1, 2, 3, Next का Design हो, तो आप किस पर ज्यादा Trust करोगे? जाहिर है दूसरे वाले पर। यही आपके Blog के साथ भी है। पहला Impression ही Last Impression होता है।

4. Pageviews Badhte Hain।

जब User को Navigation आसान लगता है तो वो ज्यादा Pages देखता है। सीधा मतलब है आपके Blog के Pageviews बढ़ेंगे। और Pageviews बढ़ेंगे तो Earning भी बढ़ेगी। क्योंकि AdSense में RPM Pageviews पर ही Depend करता है।

5. Mobile में भी Best लगता है।

आजकल 85% User Mobile से आता है। Numbering वाला Design Mobile में भी एकदम Responsive और Click करने में आसान होता है। Older Posts वाला Button Mobile में कभी-कभी दबता भी नहीं है, पर Number वाला Design एकदम Perfect काम करता है।

तो दादाभाई, अब आपको समझ आ गया होगा कि ये छोटी सी चीज कितनी जरूरी है।

Blogger में Page Numbering कैसे लगाएं? पूरी जानकारी Step by Step

अब चलिए Main काम पर आते हैं। मैं आपको Step By Step बताऊंगा। आप बस मेरे Steps को Follow करो। एक भी Step Skip मत करना।

Step 1: Blogger Settings Check करो।

सबसे पहले अपने Blogger Dashboard में जाओ। Settings > Posts पर जाओ। वहाँ पर एक Option होगा Max posts shown on main page। वहाँ पर आपने जितना Number रखा है, जैसे 5 Posts, तो उसको याद रख लो। यही Number आपको Code में भी डालना है। नहीं तो Pagination काम नहीं करेगा। बहुत लोग यही गलती करते हैं दादाभाई। वो Settings में 11 रखते हैं और Code में 9 डाल देते हैं, फिर बोलते हैं काम नहीं कर रहा। इसलिए दोनों जगह Same Number रखो।

Step 2: Main Javascript Code लगाना।

अब आपको Theme > Edit HTML में जाना है। वहाँ जाके Ctrl + F दबाओ और </body> Search करो। ये आपको सबसे नीचे मिलेगा।

अब नीचे दिया गया Main Javascript Code को </body> Tag के ठीक ऊपर Paste कर दो। ये Code ही असली Magic है।

यहाँ से Code Copy करें

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'> /*<![CDATA[*/ var perPage=3; var numPages=3; var firstText ='First'; var lastText ='Last'; var prevText ='« Previous'; var nextText ='Next »'; var urlactivepage=location.href; var home_page="/"; if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1} pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}} if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}} if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}} if(pageStart>2){html+=' ... '} for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}} if(pageEnd<lastPageNo-1){html+='...'} if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}} var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}} if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}} var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html} if(pageArea&&pageArea.length>0){html=''} if(blogPager){blogPager.innerHTML=html}} function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)} function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}} if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1} document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20} if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1} document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}} function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)} function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)} function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage} location.href=pAddress} /*]]>*/ </script> </b:if> </b:if>

बस दादाभाई, हो गया। मतलब यहाँ पर ध्यान से देख लो perPage=7 लिखा है। अगर आपकी Settings में 5 Posts हैं तो यहाँ भी 5 कर दो। numPages=5 का मतलब है एक बार में 5 Page Number दिखेंगे।

Nofollow Note: अगर आपका Link Affiliate है तो Button में rel="nofollow" जरूर लगा लें। यहाँ इसकी जरूरत नहीं है।

Step 3: Custom Design 1 लगाना सबसे जरूरी Step

दादाभाई, ऊपर वाला Code लगाने से सिर्फ Number आयेंगे, पर वो खूबसूरत नहीं दिखेंगे। उनको सुंदर बनाना के लिए Design चाहिए। इसीलिए मैं आपके लिए Custom Design 1 लेकर आया हूँ। ये Design एकदम Modern और Clean है। मैंने खुद अपने कई Blogs में यही Design Use किया है।

इस Design को लगाने के लिए फिर से Theme > Edit HTML में जाओ। अब ]]></b:skin> Search करो। ये आपको CSS वाला Section है। इसके ठीक ऊपर नीचे वाला CSS Code Paste कर दो।

यहाँ से Code Copy करें

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

बस दादाभाई, हो गया। मतलब अब Save Theme के Button पर Click कर दो। Save करते ही आपका काम हो जायेगा।

Design कैसे काम करेगा? Detail मे समझो

दादाभाई, मैंने इस Design में बहुत ध्यान दिया है। Normal Page का Color हल्का Grey रखा है ताकि आँखों को चुभे नहीं। जिस Page पर User है, उसको Orange Color से Highlight किया है। और Prev/Next को Black रखा है ताकि वो अलग दिखे। जब Mouse ले जाओगे तो हल्का सा ऊपर उठेगा, जिससे एकदम Premium Feel आयेगा।

ये Design Light और Dark दोनों तरह के Theme पर अच्छा लगेगा। और Mobile में भी Auto Adjust हो जायेगा। मैंने इसका Border Radius 8px रखा है ताकि थोड़ा Modern और Soft Look आये। अगर आप चाहो तो इसका Color अपने Blog के हिसाब से Change कर सकते हो। जैसे Orange की जगह Blue करना है तो #ff3c00 की जगह #0066ff कर दो।

5 Common गलतियाँ जो आपको नहीं करनी है।

1. Backup Na Lena - सबसे बड़ी गलती। बिना Backup के कभी भी Theme Edit मत करो।

2. perPage Galat Dalna - Settings और Code में अलग-अलग Number डालना।

3. CSS Galat Jagah Paste Karna - हमेशा ]]></b:skin> के ऊपर ही Paste करो।

4. Do Baar Code Paste Karna - एक बार Code लगा दिया तो दोबारा मत लगाओ, नहीं तो Double Pagination दिखेगा।

5. Cache Clear Na Karna - Code लगाने के बाद Blog में Change नहीं दिखे तो Cache Clear जरूर करो।

Page Numbering के बारे में कुछ सवाल जवाब

1. क्या पेज नंबरिंग लगाने से ब्लॉग की स्पीड कम होगी?

नहीं दादाभाई, बिल्कुल नहीं होगी। जो कोड मैंने दिया है वो बहुत हल्का है। इससे आपके ब्लॉग की स्पीड पर कोई असर नहीं पड़ेगा। ये वर्डप्रेस के प्लगइन जैसा हैवी नहीं है।

2. क्या ये कोड सभी ब्लॉगर थीम में काम करेगा?

हाँ दादाभाई, ये कोड लगभग सभी थीम में काम करता है। चाहे आपकी थीम Contempo हो, Soho हो या कोई कस्टम थीम हो। बस आपको कोड सही जगह पर पेस्ट करना है।

3. एक पेज पर कितने पोस्ट दिखाने चाहिए? 5 या 7?

दादाभाई, इसका कोई पक्का नियम नहीं है। अगर आपके पोस्ट बहुत बड़े हैं तो 5 रखो ताकि होम पेज जल्दी खुले। अगर छोटे पोस्ट हैं तो 7 या 8 रख सकते हो। बस ध्यान रखो, ब्लॉगर सेटिंग में जो नंबर है वही कोड में भी होना चाहिए।

4. क्या नंबरिंग लगाने के बाद Older Posts वाला बटन हटाना पड़ेगा?

नहीं दादाभाई, हटाने की जरूरत नहीं है। जब आप ये कोड लगाओगे तो वो बटन अपने आप हट जाएगा और उसकी जगह नंबर वाला डिजाइन आ जाएगा।

5. क्या इससे एडसेंस की कमाई बढ़ेगी?

सीधे तो नहीं दादाभाई, पर अप्रत्यक्ष रूप से बहुत फायदा होगा। जब यूजर आपके ब्लॉग पर ज्यादा पेज देखेगा तो पेजव्यू बढ़ेंगे। पेजव्यू बढ़ेंगे तो ऐड ज्यादा दिखेंगे और कमाई भी बढ़ेगी।

आखिरी बात

दादाभाई, आपने क्या सीखा? देखो सच बताऊँ तो Blogging में Success का कोई Shortcut नहीं होता। छोटी-छोटी चीजें ही बड़ा Difference बनाती हैं। बहुत लोग सिर्फ Post लिखते रहते हैं, पर अपने Blog के Design पर ध्यान नहीं देते। और यही सबसे बड़ी Mistake है।

Page Numbering भी ऐसी ही एक छोटी सी चीज है, पर इसका Impact बहुत बड़ा है। जब आपका Blog Professional दिखेगा, तभी लोग आप पर Trust करेंगे। आज के Time में Trust ही सब कुछ है दादाभाई। अगर User को आपका Blog ही पुराना और Incomplete लगेगा तो वो आपके बताए हुए Product क्यों खरीदेगा? क्यों आपके Link पर Click करेगा?

मैंने आपको जो Code और Custom Design 1 दिया है, वो मैंने खुद अपने 3-4 Blogs में लगा रखा है। और सच में इसका Result बहुत अच्छा है। Bounce Rate कम हुआ है, Pageviews बढ़े हैं और User अब ज्यादा देर तक Blog पर Stay करता है। Google भी ऐसे Blog को ज्यादा पसंद करता है जो User Friendly हो।

इसलिए दादाभाई, आप Without डरे ये Code लगा लो। बस एक काम करना, Backup लेना मत भूलना। मैं हर बार यही बोलता हूँ क्योंकि Backup बहुत जरूरी है। अगर कुछ गड़बड़ भी हो गया तो आप Restore करके वापस पुरानी Theme ला सकते हो।

और हाँ, Code लगाने के बाद एक बार अपने Mobile में भी Check कर लेना। क्योंकि आजकल 93% लोग Mobile से ही Blog Read करते हैं। ये Design Mobile में भी एकदम Perfect और Responsive दिखेगा।

तो बस दादाभाई, आज के लिए इतना ही। उम्मीद है आपको ये Post पूरी तरह से समझ आ गई होगी। अगर फिर भी कोई Issue आए, कोई Code Work न करे, तो नीचे Comment कर देना। मैं खुद आपकी Help करूँगा। आप बस Hard Work करते रहो, एक दिन आपका Blog भी बड़ा Brand बनेगा।

फिर मिलेंगे किसी और नया पोस्ट के साथ, तब तक के लिए धन्यवाद।🙏