Blogger Me Page Navigation Widget Add Kaise Kare ?

Author: |> Posted in Blogspot 7 Comments

Hi Bloggers, Jaise ki aap jante hai ki hame blogging karne ke liye blogging me kai widget add aur Remove karne padte hai.Isi bat ko dhyan me rak kar aaj me aap ko ek ese hi subject par article likha hai es me aap Blogger Me Page Navigation Widget Add karna Sikhenge.Jaisa ki aap jante hai ki ek blog ka Design blogging me kitna important hota hai aur blog me kai ese widget hai jaise Categories, Lavals, Like Box, Search Box etc. widget add karne padte hai, kyoki Blog me widget bhi Hamare visitors badte ka kam karte hai.

aur ek bat jab ham blog me desing karte time stlye ka bhi dhyan rakte hai to page navigation me bhi me 5 top stlye ke bare me batunga. jaisa ki aap jante hai ki jab ham blog me post publish karte hai to ye dhyan me rak kar post likhte hai ki aane wale same me bhi users hamre blog par haye aur jab new blog hamare blog par aayenge to ve hamare blog ki old post bhi padna chayenge to un users ke liye blog me page navigation widget add hona bahut jaruri hai to chaliye add karte hai step by step.

page navigation

Blogger Me Page Navigatoin Widget Kya Hai ?

Page navigation blog ya site me hota hai aur ye blog ke home ke niche ya posts ke last me hota hai. es ka kam old post ko padne ke liye use me kiya jata hai. es me 1 2 3 4 5 se 10 number tak ho sakte hai aur ek bat ye blogging me jarur add kare.

 

 

Blogger Me Number Page Navigation Widget Add Kaise Kare ?

Blogger me number page navigation widget add karne ke liye 2 step tips follow karni padengi jo bahut saral hai.

  1. CSS code add kar ke.
  2. Template Me Html Code add kar ke.

Blogger Me CSS Code Add Kaise Kare ? Page Style Ko Badane Ke Liye.

Blogger me CSS code Add karna bahut saral hai, lekin aap se koi galti na ho es liye aap meri jankari step by step follow kare.

 

 

Must Read  :-

Adgoi Kya Hai Aur Adgoi Par account Kaise Banaye (Make Money Tips)

99 me Bigrock Se Domain Name Register Kaise Kare

 

Step :-1

Blogger>Sign In>Dashboard>Template>Customise>Add CSS>Code

 

 

 

 

 

  • Sabse pahle Blogger Par jaye Aur Blog Ko Sign in kare.
  • Ab Dashboard par jaye Aur Template Par Click kare.
  • Ab Tepmlate Ke Customise Button Par Click Kare.

 

 

 

 

 

 

 

 

 

  1. Advanced Par Click Kare.
  2. Add CSS par jaye.
  3. CSS Code paste kare.

(Note – CSS code blog ki design ke liye use karte hai. is liye me aap ko 5 stlye ki code paste kare  hai.)

Stlye @ 1

 

 


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blogpager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;marginright: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);}

Stlye @ 2

 


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blogpager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{fontsize: 13px;padding: 5px 12px;marginright: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;}

Stlye @ 3

 

 


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blogpager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{fontsize: 12px;padding: 5px 12px;marginright: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;}

Stlye @ 4

 


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blogpager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{fontsize: 13px;padding: 5px 12px;marginright: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;}

Stlye @ 5

 


#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;}
.blogpager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;marginright:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{backgroundimage: webkitgradient(linear,left bottom,left top,colorstop(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}.blogpagerolderlink, .homelink, .blogpagernewerlink {background: transparent;}
a.blogpagerolderlink, a.homelink, a.blogpagernewerlink {color: #fff;}
#blog-pager .pages{border:none;background: none;}

                                                 yoast plugin ka setup kaise kare
                      
                                                kahin aap blogging addict to nahi
                                              Bigrock Se Domain Name Register Kaise Kare

Step @ 6

Blogger Me Nuber Page Navigation Ka HTML Code (Script) Add Kaise Kare ?

Ab jo html code aap add karna ha wo Template me add karna padega es liye pahle template me Edit Html ko open kare.

Template>Edit HTML>

  • Ab Template me CTRL+F button Dabaye Aur </body> ye Code Search box se Search Kare.
  • Ab aap ko ye code </body> ke upar Paste Karna Hai.

<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://hindiproblog.com/tools/WidgetCodes/page-navigation.js”/>
</b:if>
</b:if>

Es code ko paste ya enter kar ke Save Button Par Click jarur kare.

 

 

Conclusion –

To aaj aap ne apni template par nuber page navigation widget add karna sikha aur es se users bhi hamari old post aasani se pad sakta hai, aur ek bat agar es code ko set karne me koi pareshani aaye to aap muje comment kar sakte hai.

 

 

 

Comments
  1. Posted by Vipin Mishra
  2. Posted by neha garg
  3. Posted by Nice Gyan
  4. Posted by Rahul
  5. Posted by shailendra kumar

Add Your Comment