Blogger Me Number Page Navigation Button Kaise Lagaye ?

 

मित्रो आज के इस आर्टिकल में हम आप लोगो को ब्लागर ब्लाग में स्टाइलिश अगला बाटन नम्बर,पेज नविगेशन विजेट लगाने के बारे में जानकारी उपलब्ध करायेगें। अक्सर जब कोई नया ब्लागर होता है तो उसे जानकारी के अभाव में अपने ब्लाग के थीम को स्टाइलिश नही कर पाता है । आपने इसके पहले ब्लागर पर देखा होगा कि जहां Older post की जगह Number Button प्रदर्शित होते है। परन्तु यदि आप पहले से कोई ऐसा थीम इस्तेमाल कर रहे है जिसमें पेज नेविगेशन बटन, पहले से ही एड है तो आपको उसमें दोबारा एड करने की जरूरत नही। परन्तु जिसके थीम में अगला बाटन नम्बर,पेज नविगेशन विजेट एड नही है तो वे अपने थीम को स्टाइलिश बनाने के लिए एड कर सकते है। 

ब्लागर पेज नेविगेशन बटन क्या है ?

जब भी कोई विजिटर हमारे ब्लाग पर विजिट करता है तो वह चाहता है कि उसे अधिक से अधिक महत्वपूर्ण पोस्ट पढने को मिले। इसके लिए पापुलर पोस्ट,रीसेन्ट पोस्ट ,फ्यूचर पोस्ट,लेबल इत्यादि का एड होना बहुत ही जरूरी होता है। इससे विजिटर को उनके पसन्द का पोस्ट सर्च करने में आसानी होता है। परन्तु ऐसे विजेट में पोस्ट की संख्या निर्धारित होता है। पेज नेविगेश विजेट ब्लाग के होम पेज और पोस्ट के नीचे प्रदर्शित होता है। इस पर 1,2,3,4,5,से 10 तक रहता है। और इसका प्रयोग आपके ब्लाग में पडे अन्य पोस्ट को देखने के लिए किया जाता है।  जैसेः-मान लीजिए कि आपके ब्लाग पर लगभग 1000 पोस्ट है और आपके ब्लाग में नेविगेशन विजेट नही है,ऐसे में विजिटर को आपके सभी पोस्ट पढने के लिए  Older post और Newer post करके पढना पड़ेगा जिससे रीडर मनचाहा पेज पर डायरेक्ट नहीं पहुच पाएंगे। और इससे आपके ब्लाग पर आये हुए विजिटर बोर होने लगेगें और वे आपकी ब्लाग को बंद कर किसी अन्य जगह चले जायेगे। परन्तु यदि आपके ब्लाग पर अगला बाटन नम्बर,पेज नेविगेशन बटन लगा हुआ है तो ऐसे में विजिटर को आपके ब्लाग पर पोस्ट पढने में आसानी होगी। साथ ही आपके ब्लागर ब्लाग पर आर्गेनिक ट्रैफिक में भी बृद्धि होने लगेगा। जिससे आपका ब्लाग सर्च इंजन में अच्छे से रैंक कर टाप में भी पहुच सकता है। 

ब्लागर ब्लाग में नम्बर पेज नेविगेशन बटन कैसे लगाये ?

ब्लागर ब्लाग में पेज नेविगेशन विजेट लगाना बहुत ही आसान है।  पेज नेविगेशन विजेट एड करने के लिए आपको दिये गये स्टेप को फालो करना पडेगा जिससे आप अपने ब्लागर ब्लाग में आसानी के साथ पेजनेविगेशन विजेट लगा सकते है। 

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

यदि आप ब्लॉगर ब्लॉग में नम्बर पेज नेविगेशन बटन के कोड को वायरस मुक्त कापी करना चाहते है। तो इसके लिए आप  डाउनलोड बाटम पर क्लिक कर ब्लॉगर ब्लॉग में नम्बर पेज नेविगेशन बटन  के कोड को डाउनलोड कर ले। 

• [[Number Page Navigation Button CODE-DOWNLOAD HERE ]]

स्टेप-02

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

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

सबसे पहले आप नीचे दिये गये  ब्लॉगर ब्लॉग में स्क्रॉलिंग कोड बॉक्स के कोड को ]]> </b: skin>  में लगाने के लिए कापी पेस्ट कर ले । 

01-Numbered Page Navigation on Gray

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;} .showpageOf{display:none!important} #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;} #blog-pager .pages{border:none;} 

02-Black Numbered Page Navigation With Orange Current Page

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;} #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} .showpageOf{display:none!important} #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} 

03-Dark Numbered Page Navigation With Blue Current Page

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;} a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;} #blog-pager .pages{border:none;background: none;} 

04-Gray Page Navigation With Blue Page Number

#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;} 

05-Blogger Pagination on Green with Orange and Pink on Hover

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;} #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;} .showpageOf{display:none!important} #blog-pager .pages{border:none;} 

06-Orange Numbered Page Navigation Widget for Blogger

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

07-Grey Paged Navigation for Blogger with Red Current Page

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

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

• अब Search Box में (CTRL + F)  दबाकर आप ]]> </b: skin> tag  को सर्च करें ।
• अंत में मार्कअप की लाइन का अनुसरण करें और इसे ]]> </b: skin> के ठीक ऊपर पेस्ट करें ।
• इसके बाद अब आपको save template पर क्लिक करके सुरक्षित सेव कर लेना है। 

नोट: यदि आप "प्रथम" और "लास्ट" बटन छिपाना चाहते हैं, तो सीएसएस कोड के नीचे इस लाइन को जोड़ें:-

.firstpage, .lastpage {display: none;} 

नंबर पेज नेविगेशन की स्क्रिप्ट ब्लॉग में कैसे ऐड करे ?

यदि आप ब्लॉगर ब्लॉग में नम्बर पेज नेविगेशन बटन की स्क्रिप्ट कोड को वायरस मुक्त कापी करना चाहते है। तो इसके लिए आप  डाउनलोड बाटम पर क्लिक कर ब्लॉगर ब्लॉग में नम्बर पेज नेविगेशन बटन  स्क्रिप्ट कोड कोड को डाउनलोड कर ले। 

• [[NUMBER PAGE NAVIGATION BUTTON SCRIPT CODE-DOWNLOAD HERE ]]

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> /*<![CDATA[*/ var perPage=7; var numPages=4; 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> 

अब आप </body> टैग को Ctrl+F key प्रेस करके सर्च करे और दिए गए कोड को </body> टैग के ठीक ऊपर कॉपी करके पेस्ट कर दे  । 

नंबर पेज नेविगेशन विजेट को कस्टमाइज कैसे करे ? 

इस स्क्रिप्ट को आप अपने हिसाब से कस्टमाइज भी कर सकते है। 

perPage: 7, numPages: 6, var firstText ='First'; var lastText ='Last'; var prevText ='« Previous'; var nextText ='Next »'; }

01. perPage : 7 – Aap ek page me jitne post ko dikhana chahate hai 7 ke place utna number likhe.

02. numPages : 6 – Page navigation me jitne page ko dikhana chahte hai 6 ke place par utna number likhe.

03. ‘First’, ‘Last’, ‘Previous’, ‘Next’ : Is words ke place par aap apne pasand ke words ko likh sakte hai.

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