Blogger Me Previous/Next Button Kaise Add Kare (HTML Code)

इस पोस्ट में, मैं आपको समझाऊंगा कि Blogger Website पर Previous और Next Button कैसे Add Kare. हम सभी जानते हैं कि Blogger में कोई Plugin उपलब्ध नहीं होता है इसलिए हमें Blogger Theme में Manual रूप से HTML Code जोड़ने की आवश्यकता होती है| Blogger में Previous और Next Button कैसे जोड़ें?

यह Buttton उपयोगकर्ताओं को अगले Page या Post पर जाने में मदद करता है और उपयोगकर्ता के अनुभव को बेहतर बनाता है और Blogger Theme को एक Professional रूप भी देता है।

यह आपके Blog पर Traffic बढ़ने में मदद करता है, Bounce Rate को कम करता है, और आपकी Website की Ranking में सुधार करता है और आपकी Site के समग्र SEO में सुधार करता है।

Blogger की कुछ Free Themes/tempales में Previous और Next Button नहीं होते हैं तो हमें Blogger template में Previous और Next Button  खुद ही Add करने होते हैं।

और मैं जानता हूँ कि आप सोच रहे होंगे कि अगर आपको Coding का ज्ञान नहीं है तो आप Navigation Button को कैसे जोड़ेंगे, तो आपको कोई Tention लेने की जरूरत नहीं है?  इसे Add करने के लिए आपको Coding Knowledge की आवश्यकता नहीं है।

How To Add Previous/ Next Button

इस Article में मैं आपको एक बहुत ही आसान तरीका बताने जा रहा हूँ| जिसे आप Follow करके अपने Blogger Template में Previous और Next Button Add कर सकेंगे। जिस्को Navigation Button भी कहा जाता है

तो चलिए नीचे दिए गए हर Ponit को Follow करते हैं: Blogger में Navigation Button कैसे जोड़ें

1- Blogger Dashboard में Login करें और Theme Option पर Click करें।

Note: Theme में कोई भी बदलाव करने से पहले, Theme का Backup लेना न भूलें।

2- Edit Theme पर Click करें- इसके बाद आपके सामने कुछ Coding Show होगी फिर आपको ctrl+F Click करना है।  फिर आपको सबसे ऊपर Search Box दिखाई देगा।

3-  उस Search Box में आपको <data:post.body/> सर्च करना है|

4- फिर आपको नीचे दिए गए Code को Copy करके <data:post.body/> के नीचे Html Code Paste करना होगा|

HTML CODE: 

<b:if cond='data:blog.pageType == "item" '> <div class='K2_Pre_Next'> <b:if cond='data:olderPageUrl'> <a class='pre-btn' expr:href='data:olderPageUrl'> <div class='icon'><svg class='h-6 w-6' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M11 19l-7-7 7-7m8 14l-7-7 7-7' stroke-linecap='round' stroke-linejoin='round'/></svg></div><div class='label'>Previous</div></a> </b:if> <b:if cond='data:newerPageUrl'> <a class='next-btn' expr:href='data:newerPageUrl'> <div class='label'>Next</div> <div class='icon'><svg class='h-6 w-6' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M13 5l7 7-7 7M5 5l7 7-7 7' stroke-linecap='round' stroke-linejoin='round'/></svg></div></a> </b:if> </div> </b:if>

5- इस HTML CODE को जोड़ने के बाद आपको CSS CODE Paste करना होगा। Theme में खोजें  ]]></b:skin> or </style> ये मिलने के बाद आपको इसके ऊपर Css Code Paste करना है जो कि नीचे दिया गया है| बस नीचे दिए गए CSS Code को Copy & Paste करें 👇 

CSS CODE: 

/* CSS code for previous-Next button */ .K2_Pre_Next .icon {width: 20px;height: 20px;} .K2_Pre_Next {display: flex;position: relative;margin-top: 24px;} .K2_Pre_Next .pre-btn,.K2_Pre_Next .next-btn {display: flex;align-items: center;justify-content: center; gap: 8px;font-family: "Inter", sans-serif;background: #ff1a75; color: #fff;text-decoration: none;padding: 8px 24px;font-size: 16px;min-width: 150px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;width: 50%;border-left:1px solid; border-right:1px solid;} .K2_Pre_Next .pre-btn:hover,.K2_Pre_Next .next-btn:hover{background: #3a8f7b;} .K2_Pre_Next .next-btn {position: absolute;right: 0;} .K2_Pre_Next .pre-btn:hover .icon {animation: nav-prev-anim 300ms alternate infinite;} .K2_Pre_Next .next-btn:hover .icon {animation: nav-next-anim 300ms alternate infinite;} @keyframes nav-prev-anim { to {transform: translateX(4px);}} @keyframes nav-next-anim {to {transform: translateX(-4px);}}

6- HTML और CSS दोनों Code को थीम में जोड़ने के बाद सेव बटन पर क्लिक करें। और पेज को Refresh करें।

अब आपके Blog  में Navigation Button Add हो गया होगा| अब आप अपना Blog Post Check करें कि Buttons Add हुए हैं या नहीं | Previous और Next Button आपके Blog में Add होगे।

निष्कर्ष:

हमें उम्मीद है कि आपको हमारी Post पसंद आई होगी और ब्लॉगर ब्लॉग में Navigation button/ Previous and Next Buton बटन जोड़ने में आपको मदद मिली होगी। यदि आपको इन कोड को जोड़ने में कोई समस्या आती है तो आप अपना प्रश्न Comment Box में पूछ सकते हैं। आप ये पोस्ट को अपने दोस्तों को Facebook, Instagram पर शेयर कर सकते हैं|

Read More: Blogger Me HTML Code Box Kaise Add Kare