Thursday, June 29, 2017

Blog Next Page Ke Liye Number Navigation Wedget kase add kare

Hello friend aj ke is article me ham janege ki apne blog ka best desgin ke liye Number navigationo page kase banate hai. Agar ap blogger hai yeah article apke liye kafi most hoga kyoki her blog ka disgin attrective hona chaiye jisse hamre visitor ko blog ke her ek page tak pahucne me assani ho. Are blog ke disgin bi acha ho.
Blog next page ke liye number navigation wedget kase add kare

Blog next Page number navigation bar kya hota hai.

apne bahut sare blog or website me dekha hoga ki unke blog ke home page per 6 se 7 post show hoti are uske niche Prev next dikhte hai ye number page navigation bar hota hai. yeah navigation isliye add kiya jata hai.
kyoki agar ap apne blog per 100-1000 tak posts kar di hai to wo sabhi post apke blog ke main page per open ho jaygi are apke site ki leading vaut slow ho jaygi. Bus is ke liye page number navigation tool banya gya hai. are agar apke site ke speed achi to apke vistor utne ji jayda honge



How to add next page number navigation in blog page

Add next button widget in blogger post
Step 1. Sabse phale apne blogger account me Login kare.
Step 2. Dasboard me jaker theme per click kare. next step me Edit HTML per click kare.
Step 3. Now ctrl+f press karke search box me niche diye gaye code ko copy karke paste kare
]]> Ab enter press kare.
Ab apne jo code paste kiya wo highlight ho jayga ab us code ke pahle apko niche jo navigation number page passand hai. uska code copy karke paste kar de Bus apka navigation number page add jo jayga

Design1.

next page ke liye number navigation
#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);}

Design2.

next page ke liye number navigation
#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;}

Design 3.

next page ke liye number navigation

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

Desgin 4.

page ke liye number navigation

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



Desgin 5.

page ke liye number navigation

#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;}
Finally Blog next page ke liye number navigation wedget kaise add karte hai. blog me next pagenavtion wedget add karna bahut assan hai. Asha karta hu apko ye article acha lag hoga. agar apko hamari ye post achi lagi hogi. to social media per jarur share kare.
Read Also
  • Stylish code box blog ke liye.


  • Animated demo and download button Website me Kaise Lagye.

    About Author:-author Hello everyone my name is sultan i am sharing in this Blog About Blogging And technology Make Money online, Web Design, Internet Tips And tricks Etc Unique Article Everyday. Learn something new here....

    Let's Get Connected:- Facebook | Twitter | Google Plus