BloggingHindi - Blogging Aur Internet Ki Sabhi Jankari

  • About US
  • Contact Us
  • Blogging
  • WordPress
  • SEO

Blog me Page navigation kaise add kare

Last Updated on January 10, 2023 by Md Arshad Noor 12 Comments

दोस्तों हम अपने blog के अच्छे design के लिए बहुत मेहनत करते है. ताकि हमारे ब्लॉग की look बेहतर हो पाए। यहाँ में आपको बताने वाला हूँ कि blog में Next and prev button with numerials Add कैसे करें? इसके बारे हम आपको पूरी जानकारी देने की कोशिश करेंगे।

 

 

 

 

अपने बहुत से website या blog में देखा होगा की homepage में कुछ post होते है उसके बाद उसमे Next page और previous page number के साथ होता है.  और इससे blog का design भी काफी बढ़ जाता है।

अगर आपके site में 200-400 post है तो सभी post को homepage पर एक साथ दिखा नहीं सकते और अगर दिखा भी दिए तो अपके site का loading time बहुत ज्यादा हो जायेगा.  इसीलिए हम post को कुछ page में बाँट देते है.  और उस page पर हम Next page , previeve page और page number को show करवा सकते हैं।

Blog में Next, prev page कैसे लगाये

अब में आपको step by step इसके बारे में बता रहा हूँ. इस post को follow करके आप अपने ब्लॉग में next,prev button add कर सकते हो.  अगर कही पर भी दिक्कत हो तो हमे comment में बताइये। 

 

Step 1: सबसे पहले आप blogger.com में जाकर login कीजिए।

&n

Step 2: अब आप Dashboard » Themes » Edit HTML में जाएं।

Step 3: यहाँ पर आप यहाँ ]]></b:skin> search कीजिए।

Step 4: अब आपको जो code में निचे दे रहा हूँ इसमें जो भी पसंद आये उस code को   ]]></b:skin>  के ऊपर Paste कर दीजिए।

Here are Codes

Style 1: Gray colour

page-navigation-widget-for-blogger-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:- orange current page page-navigation-widget-for-blogger-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:-

page-navigation-widget-for-blogger-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:-

numbered-page-navigation-javascript-widget-for-blogger-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:-

numbered-page-navigation-javascript-widget-for-blogger-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:-

numbered-page-navigation-javascript-widget-for-blogger-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:-

numbered-page-navigation-javascript-widget-for-blogger-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;}

 

अगर आप first और last buton भी add करना चाहते हो तो निचे दिए गए code को भी लिखे

.firstpage, .lastpage {display: none;}

 

 

  

 

You May Also Like

  • Successful Internet Marketers Ke 10 Qualities [You Should know]

    Successful Internet Marketers Ke 10 Qualities [You Should know]

  • Website/Blog ka Page Rank Increase kaise kare

    Website/Blog ka Page Rank Increase kaise kare

  • Post publish karne se pahle yaad rakhe 12 important points

    Post publish karne se pahle yaad rakhe 12 important points

  • Micro Niche Website Banakar $1000 Monthly Kamaye [Complete Guide]

    Micro Niche Website Banakar $1000 Monthly Kamaye [Complete Guide]

About Md Arshad Noor

हेलो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में इस ब्लॉग में रेगुलर नई नई आर्टिकल्स लिखता हूँ. यहाँ पर हम ज्यादातर Blogging, Make Money, SEO, WordPress आदि से सम्बंधित Article मिलेगी. आपको हमारी लेख पसंद आती है तो इसे सोशल मीडिया में शेयर करें। अगर आपको कोई सहायता चाहिए तो कमेंट कीजिए।

COMMENTs ( 12 )

  1. tariq says

    Assalamu alaikum Arshad Bhai
    bhai ek post ko do teen parts me divide kaise kare aur usi ke neeche next number of page sirf usi post ke liye kaise lagaaye ?

    Reply
  2. vijay says

    thanks

    Reply
  3. vijay says

    nice

    Reply
    • Md Arshad Noor says

      Thanks bro.
      Keep visiting….

      Reply
  4. Rahul Sharma says

    sir mere blog ke deshbord me temolete aa he nhi rha hai

    Reply
  5. Sanjeev says

    सर ब्लॉग की पोस्ट में नेक्स्ट बटन कैसे लगाएं? जैसे कि मान लीजिए मैंने अपने ब्लॉग की पोस्ट में कहानी डाली है कहानी काफी बड़ी है और मुझे बीच में नेक्स्ट बटन लगानी है तो कैसे लगाएं

    कृपया सुझाव दीजिए

    Reply
    • Md Arshad Noor says

      Hi Sanjeev,
      Post Editor me jaha se post ko next page me dikhana hai <!––nextpage––> ka use kijiye.

      Reply
  6. Md Nasrul says

    Sir code copy nahi ho raha hai

    Reply
  7. Manoj Dwivedi says

    भाई साहब मेरे ब्लॉग का template blogger में दी गई थीम से लिया है , थोडा सा कैस्टमॉइज किया है ,पर ब्लॉग में ट्राफिक नहीं आ रहा ,क्या ब्लॉग के अंदर की ही किसी नई थीम लगाने के बाद पूरी SEO सेटिंग और नई बैकलिंक बनाना पड़ता है ।
    यदि आप एक बार मेरे ब्लॉग में आएं तो आपका आभारी रहूंगा कुछ सुधार के उपाय बताएं।

    Reply
    • Md Arshad Noor says

      No, dhire dhire traffic recover ho jayega. Apke blog ka URL bataye?

      Reply
  8. Md Athar says

    Me programming ke bare me likh raha hu, jab mujhe blog me code show karna hota he to use code editor se screen shot leke show karta hu, lekin me chahta hoon k code aise likhu k visitors use asani se copy kar sake jaise aap ne page navigation ke bare code likha he,
    Us ke lye kya karna padega?

    Reply
    • Md Arshad Noor says

      Visual mode me code ko paste kar sakte ho.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Please do not spam! otherwise your comment will be removed.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Useful Articles

Successful YouTuber Banne Ke Liye 6 Ways [Full Guide]

Chartered Accountant (CA) कैसे बनें? चार्टर्ड अकाउंटेंट बनने की प्रक्रिया

WordPress Blog Post URL Ke Last Me .html Kaise Add Kare Aur Q Kare

Adsense se related 30+ important questions & Answers

Kisi Bhi Blogger Ko Link Exchange Kyu Nahi Karna Chahiye? [5 Reasons]

Blogging Ke 10 Important Myths ke Bare Me Apko Pata Hona Chahiye

WordPress Ke Text Widget Me PHP Kaise Use Kare

Successful Blogger 5 Tariko Se INCOME Karte Hai

7 Karn WordPress Me Jyada Plugin Use Nahi Karni Chahiye

Custom Email Account Ko Gmail Account Se Connect Kaise Kare [Step by Step]

10 Chije (Things) Jo Apko Successful Blogger Banne Me Badha Degi

Blog Ki Loading Speed Mayne (Matter) Kyu Rakhta Hai [5 Karan]

WordPress Me Bina Plugin Ke Social Media Sharing Button Kaise Add Kare

About Us

mdarshadnoorहेल्लो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में अररिया, बिहार का रहने वाला हूँ. मुझे नयी चीजें सीखना-सिखाना बहुत पसंद है. में पिछले कई सालों से ब्लॉगिंग के फील्ड में हूँ. इस ब्लॉग में आपको ब्लॉगिंग और इन्टरनेट से सम्बन्धित जानकारी मिलेगी. अधिक जानकारी के लिए यहाँ क्लिक करें।

SUBSCRIBE OUR NEWSLATTER

हमारे नवीनतम पोस्ट की सूचना एवं उपयोगी सामग्री प्राप्त करने के लिए हमसे जुड़ें

Posts for WP Users:

WordPress Database Se Orphan/Unused Tables Ko Delete Kaise Kare

WordPress Me Login Username Kaise Change Kare [3 Methods]

WordPress Blog Me Free HeatMap Kaise Banaye [Sumo Me Plugin Setup]

More Posts from this Category

DMCA.com Protection Status

Recommended For You

Blog me Email Subscription widget Kaise Add Kare 2 Tarike

WordPress Ke Text Widget Me PHP Kaise Use Kare

SEO Friendly Post Kaise Likhe Jayada Se Jyada Traffic Pane Ke Liye

Post publish karne se pahle yaad rakhe 12 important points

Long tail Keywords Search Karne Ke Liye 5 Free Online Tools

Bloggers Ke Liye 10 Jaruri Android Apps [Manage BLOG with Mobile]

Copyright © 2023 - All rights reserved. AboutContactSitemapDisclaimer