Blogger Me Numbered Page Navigation Menu Widget Kaise Lagaye

Numbered Page Navigation Menu In Blogger

Numbered Page Navigation Menu In Blogger – Kisi bhi blog ke liye widgets ka bahut jyada important hoti hain, or iss baat ko sabhi bloggers acchi tarha se jaante hain.. Widgets ke bina kisi bhi blog, chahe wo wordpress platform par ho ya Blogger Platform par, Usko aap acchi tarha se setup or design nhi kar paaoge or aapko aapke blog par jyada traffic bhi nhi mil paayega, kyuki blog ke visitors blog ki design or uspar helpful Widgets ko dekhkar hi visiaine apni previous posts me bahut si important blogger widgets ke baare me aapko btaya tha, or unko apne blogger blog par kaise lagaye iske baare me poori jaankari aapko di thi.

Aapke liye kuch other important blogger widgets yeh hain :-

Aaj iss post me aapko aapke blogger blog par Numbered Page Navigation Widget add karne ke baare me btaunga.

Bahut si custom blogger templates me page navigation nhi milta, jiski wajah se aapke blog ke visitors ko aapke blog ki old posts search karne me dikkat hoti hai. Aise me aap chahte hain ki aap apne blog par Page Navigation Widget add kare, jisse aapke blog ka design bhi professional lage or aapke visitors aapke blog ki old posts tak bhi aasani se pahunch sake.

To agar aap bhi apne blog me custom page navigation menu widget add karna chahte hain, to yeh post padh kat aap apne blogger blog me page navigation menu widget aasani se add kar sakte hain.. Apne blogger blog me custom Numbered Page Navigation Menu widget add karne ke liye yeh poori post dhyaan se following kare.

Blogger Me Numbered Page Navigation Menu Widget Kaise Add Kare (Step-to-Step Full Guide In Hindi)

Numbered Page Navigation Menu In Blogger

Iss post me aapke liye 5 colour styles ke page navigation menu hain. Inme se jis bhi colour ko aap apne blog me lagana chaho, uske codes select kare.

:- Page Navigation Menu ko add karne ke liye aapko sabse pehle apne blog ki template me CSS Style codes add karne honge. Iske liye aap pehle yeh steps follow kare –

Step 1 – Apne Blogger Dashboard me jaaye or Theme par click kare.

– Ab Edit HTML par click kare.

Step 2 – Edit HTML par click karne ke baad aapke saamne aapke blog ki coding open ho jayegi. Ab CTRL+F press kare or yeh code search kare ?

]]></b:skin>
Step 3 – Ab ]]></b:skin> search karne ke baad niche diye gaye page navigation style codes me se apni pasand ke codes select karke copy kare or ]]></b:skin> ke aage (above) paste kar dein ⤵

Gray Page Navigation Menu Ke Liye Yeh Codes Select Kare :-

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

Green Numbered Navigation Menu With Orange Number Ke Liye Yeh Code Select Kare :-

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

Orange Numbered Page Navigation Menu Ke Liye Yeh Codes Copy Kare :-

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

Black Navigation Menu With Orange Numbers Ke Liye Yeh Codes Copy Kare :-

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

Grey Navigation Menu With Blue Numbers Ke liye Yeh Codes Copy Kare :-

#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;}
Note :- Agar aap navigation menu se “First” or “Last” Button ko Hide karna chahe, to iss CSS codes ke aage yeh code paste kar dein :-
.firstpage, .lastpage {display: none;}

Note – Ab aapko yeh codes paste karne ke baad template me aapko JavaScript codes add karne hain.

Script codes add karne ke liye aap yeh steps follow kare :-

Step 4 :- script codes add karne ke liye CTRL+F press kare or yeh code search kare ?

</body>
Ab Yeh script codes select karke copy kare or </body> ke just aage (above) paste kar dein :-
<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=7;
 var numPages=6;
 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>
Customization :-
Aap inn script codes me agar change karna chaho, to aap yeh changes kar sakte ho –
perPage: 7,
numPages: 6,
var firstText =’First’;
var lastText =’Last’;
var prevText =’« Previous’;
var nextText =’Next »’;
Inme Red words me likhe hue ki jagah aap apni pasand ke changes kar sakte ho.
Finally,
Ab aap template ko save kar dein. Ab aapke blog par Numbered Page Navigation Menu add ho gayi hai. Apne blog ko open karke aap isko dekh sakte hain.
Agar aapko yeh widget add karne me koi problem ho rahi hai ya aapka koi bhi question hai, to apna sawaal comment box me jaroor kare.

Rohit Maan
Hollo Readers, I'm Rohit Maan And I'm founder CEO Of This Website. I'm A Professional Blogger, Digital Marketing Specialist, And Web Developer. I'm From Churu, Rajasthan