How to Add Numbered Page Navigation Widget for Blogger in HINDI

ब्लॉगर में हमारे पास एक ऑप्शन होता है  की   हम  होम  पेज पर  कितना पोस्ट डिस्प्ले करना चाहते  है।     setting menu>posts and comments >how many posts you want       जब हम एक बार एक बार इसे सेट कर देते है तब हमें ओल्डर एंड नेवेर पोस्ट नेविगेशन हमारे होम पेज पे दीखता है निचे फोटेर पे।  ब्लॉगर में नम्बर सिस्टम नही  दीखता  है। 

                      इसकी वजह से हमारे यूजर को हमारे सारे पोस्ट नही दीखता है।  वो जल्दी एक्सिस नही कर पते हमारे पोस्ट को। 

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

तो  सीखते है कैसे नुम्बरेड पेज नेविगेशन सिस्टम को ब्लॉगर में जोरे।

आप इस WIDGET को two step में ऐड कर सकते है :

1. By adding the css
2. By adding the script.

तो अब कस स्टाइल कैसे ऐड करे :

1. Adding the css

Step 1. Go to blogger dashboard> templetes>click to Edit HTML button.

Step 2. code area में कहि भी क्लिक करे और CTRL +F Key  करे। Blogger search box open हो जायेगा। 

तब इस कोड को सर्च बॉक्स में पेस्ट करके एंटर दबाये 

  

]]></b:skin>

Step 3.  अब Numbered page style select करे और  code कॉपी कर ले।  और ठीक इसके ]]></b:skin> ऊपर  paste कर  दे। 

Style 1

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

Style 2

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

Style 3

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

Style 4

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

Style 5

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

Style 6

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

Style 7

#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: if you want to hide the "First" and "Last" buttons add this line below the CSS code:.firstpage, .lastpage {display: none;}

2. Adding the script

Step 4  अब इस कोड को सर्च करे।

</body>
Sstep 5    इसको कोड के ऊपर जोरे।

<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="/";/*]]>*/</script><script src="http://stormte.googlecode.com/svn/trunk/page-navigation2.js"/></b:if></b:if>

 आप  सेटिंग को बदल सकते है।

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

1) per page : आप कितना पोस्ट एक पेज पर डिस्प्ले  करना चाहते  है।  पहले से 7 है अगर आप बदलना चाहते है तो  SETTING MENU>FORMATTING> SHOW AT MOST? POSTS. save settings.

2)num page : page navigation  में कितना पेज दिखे।  पहले से 6 है।

Step 8  Save Templetes button  करे।



Please  comments ..............

and send you feedback through  contact us  widget.

i fell so crazy.....

it is my first post............pls like ........ and comments..