Blog me Page navigation kaise add kare

दोस्तों हम अपने 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 कर दीजिए।

See also  Mockup Image Kya Hai Aur Mockup Image Banane Ke Liye 5 Websites

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

 

 

  

 

Like the post?

Also read more related articles on BloggingHindi.com Sharing Is Caring.. ♥️

Sharing Is Caring...

12 thoughts on “Blog me Page navigation kaise add kare”

  1. 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. सर ब्लॉग की पोस्ट में नेक्स्ट बटन कैसे लगाएं? जैसे कि मान लीजिए मैंने अपने ब्लॉग की पोस्ट में कहानी डाली है कहानी काफी बड़ी है और मुझे बीच में नेक्स्ट बटन लगानी है तो कैसे लगाएं

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

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

    Reply
  4. 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

Leave a Comment

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

×