Blogger Me Numbered Page Navigation Menu Widget Kaise Lagaye

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 :-

• Blogger Me Table Of Contents Ya Posts Sitemap Kaise Add Kare
• ब्लॉगर में Intense Debate कमेंटिंग सिस्टम कैसे लगाएं
• ब्लॉगर में Popup Facebook Likebox Widget कैसे लगाएं

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)

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>

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

.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>

<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>