10 Stylish Page Navigation Widget Ko Blogger Me Kaise Add Kare

Ham blog ko bahut armano se banate hai. Sochte hai ki ham apne blog par ye karege bo karege. Ham apni blog ko yesha banayege baisa banayege. Ham blog to bana lete hai or blog par achhe achhe post bhi publish karte hai. Lekin hame phir bhi achha treffic nahi milta hai. iski bajah hoti hai ki hamara blog ka look achha nahi hona. Blog ke kharab look se visiter hamari blog ki traf akarsit nahi hoote hai Or isi ke chalte bahut saare blogger blogging chod dete hai. Blog ko bahut saare tareeke hote hai design karne ke liye or number page navigation widget bhi ek trah ka blog design me se ek hai. Jab hamare blog par 1 se 5 ke beech me post hote hai tab tak to theek rahata hai.  Lekin jab 5 se jayada post hote hai to bo older post newer post ke roop me hamare sabhi post ke neeche a jate hai.

or isse hamari site ka look kharab ho jata hai. hamari site ka look isliye kharab ho jata hai kyoki hamare site par agar 1000 post hai to hamara visiter older post newer post par click kar kar ke paresan ho jayega, isliye ham bahapar number page navigation button ad karte hai. Jiski help se hamare visiter asani se number par click karke choose kar sakta hai. Agar ham chahe to ham apne blog me Jayada post show hone se rok sakta hai.

Blogger Ke Home Page Par 4 Se 5 Post Kaise Show Kare ?

Agar koyi yeshi theem Use kar hai jisne Number page navigatio widget/Botton pahle add hai. To uske liye agar ham apne home page par jayada post show nahi karna chahte kyoki agar hamare blog me number page navigation next prev botton/widget add hai or bo usme post ko to kar raha hai lekin aap home page par aap apni passand se show karna chahte hai.To neeche ke step follow kare.

• Blogger me Signin kare.
• Setting  par click kare.
• Posts, comment, sharing par click kare.
• Abapke samne ek new window open hogi usme jisme apko Show Most ke box type karna hai ki aap apni blog par kitne post show karna chahta hai.

Ye process sabke liye hai jo naumber page navigation widget use karte hai ya karne ja rahe ya jo abhi nahi kar rahe. Aagr aap number page navigation widget/botton age use karege or aap apni passand se  Apne blog ke home page par jitne post show karna chahta hai. Ye sabhi ke liye same process hai.

Number Page Navigation Widget Blog Me Lagana Kyo Jaroori Hai

Number page navigation widget ko blog me add karne se hame bhi bahut fayeda hai or hamare visiter ko bhi hai. Me uper bhi bata chuka hu agar hamare blog par 1000 post hai to hamara visiter 1000 post ko padne ke liye kaha tak older post or newer ko click karega. Agar hamne Number page navigation botton/widget ko blog me add nahi kiya hai to samjh lo ki hamne bahut saara treffic loss kar diye hai. Agar hamre blog me nuumber page navigation nahi hai or hamare blog ke post read karna hai. Bo bahi tak post read karege jaha tak unhe Koyi priblem nahi ati hai. Agar unhe problem ayige to bo hamare blog ko off kardege or sayad hi phir kabhi hi hamare blog ko open karege. Isliye to bhai hame apne blog me number page navigation next prev botton/widget add karne chahiye.

Blogger Me Number Page Navigation Widget Ko Add Kaise Kare ?

Blog me number page navigation widget/botton lagana bahut hi assan hai. Me apko uper bhi bata chuka hu ki iske kya kya fayede hote hai or ise manage kaise karte hai. Ab apka kaam hai blog me lagana. Hame bas apni blog me do code ad karne hai jiski help se ham apni blog me number page navigation ko apne blog me add/laga sakege.

• Css coding
• Java script

Hame bas ye do coding apni blog ki coding me add karni hai or hamara poora step compleat ho jayega iske liye aap hamare neeche ke step follow kare -

Top 10 Stylish Number Page Navigation Widget Css code 

Me jo code apko de raha hu bo css ke code hai. Ye to khusi ki baat hai ki ham inhe apne hisab se cutomize kar sakte hai. Isliye agar aap inme koyi changing karna chahe to kar sakte hai.

Css Code 1:

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 15px; }.blog-pager {background-color: white; border: 1px solid lightGrey;}.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 10px 20px;margin-right:-2px; color: #fff; background-color: #000; border: 1px solid lightGrey;}.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background: red;text-decoration:none;color: #fff;}#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:red;}.showpageOf{display:none!important}#blog-pager .pages{border:1px solid red;}

Ye code mujhe bahut passand hai. Kyoki ise mene apne blog me use karta hu.

Css code 2 :

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

Css Code 3 : 

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

Css Code 4 :

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

Css Code 5 :

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}<br />.blog-pager {background: none;}<br />.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;}<br />.showpageOf{display:none!important}#blog-pager .pages{border:none;}

Css Code KoKaise Add Kare Blog Me

Css code ko blogger me add karna bahut hi assan hai. Iske liye aap neeche ke step follow kare.

• Sabse pahle blogger me login kare
• Phir Theem par click kare
• Or phir Edit Html Par click kare.

Adhik jankari ke liye nechhe ke screen shot dekhe.

phir jaise hi aap edit html par click karege to aapke samne apki blog ki coding open  ho jayegi to aapko ab karna hai ki aap apne letptop/computer ke keyword se. ctrl+f  botton dabaye. isse ye hoga ki jaise aap ctrl+f key dabaye ge to aap ki screen par ek search box a jayega. Or phir aap usme  ]]></b:skin>  ye code copy karke us search box me past karde or Enter botton dabakar search kare. 
or jo aapne css style code copy kiye the aap theek  ]]></b:skin> ke uuper past kar dijiye or save template par click kar dijiye.

Yesha kartte hi hamara adha kaam poora ho gaya hai. Samjh lo ki hamane blog par number page navigation widget laga liye hai. Ab hamara doosra step hai jise ham bahut hi saralta se paas kar lege iske liye aap neeche ke step follow karo.

How To Add numbered page navigation widget for blogger

Ab me apko ek java script code traha hu jisko apko </body> ke uper past karna hai. Dhayan rahe ki ise css coding ki tarah edit karne ki cosic na kare. Kyoki ye java script coding hai. ye css coding thodi nahi poori alag hai.

<b:if cond='data:blog.pageType != "item"'><br /><b:if cond='data:blog.pageType != "static_page"'><br /><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><br /></b:if><br /></b:if>

note- Isme jo apko <br/> tag dikhrahe hai use aap delet kar de. Apko code </body> ke theek uper past karna hai.

Ab aap save theem par click karde aab apke blog me next prev number page navigation widget/botton show hone lage hai. 

Number Page Navigation Widget ko customize Kar Sakte Hai.

Me apko uper bhi bata chuka hu ki Ise kaise customize kare. Lekin Number Page Navigation Widget Ko cutomize Karne Ka ek Or taara hai.

App ko uper script ko ham is prakar se edit kar sakte hai.

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

Ham yis script code ko apne hisab se edit kar sakte hai. Dhayan rahe iske bhi roul hote hai ise hame iski roul follow karke kare.

• Per Page : Aap ek page me jitne post dikhana chahte hai. Use 7 ke isthan per likho.
• Number Page : Page navigation me aap jitne page ko deekhana chahte bo 6 yisthan par likho.
• First, Last, Next, prev , ko edit karke aap apni passand ka name dede jo aap jahe lekin mere hisab se yahi better hai.

Lable Post : 

Lable post ka ka matlab hai ki agar koyi visiter hamare blog par ata hai or bo lable click kare ke post ko serch read kar read kare to baha par 20 post shhow hote hai baha 20 show hone se ham rok sakte hai or uski jagah ham apni passand se show kara sakte hai iske liye aap hamare neeche ke step follow kare.

• Sabse pahle aap template par click kare or phir edit html.
• phir aap ye code apni blog ki coding search kareke chek kare 

expr:href='data:label.url'

• yis code ko search karne ke baad apko yis code ko delet karke ke ye nechhe ka code uske yisthan par past kar de

expr:href='data:label.url + "?&max-results=7"'

Aap is code ko past karne ke badd save template par click kar de.

Note- yis code me 7 ki jagah aap apni passand ka number daale jitne aap show karana chahte hai.

Last Word:

Agar uper diyi hue procees ho sahi se follow karoge to aap jaroor safal hoge. agar koyi problem aye to aap apne sawal nneche comment box me jaroor pooche. Or ye jaroor bataye ki apko hamara post Top 5 Stylish Number Page Navigation Widget Ko Blogger Me Add Kare Kaisa laga.