Blogger में Custom Read More Button कैसे लगाएं

नमस्कार दादाभाई, अगर आप Blogger पर Blogging करते हो, तो आपने एक चीज जरूर Notice की होगी। जब आप कोई Post लिखते हो, तो आपके Home Page पर पूरी की पूरी Post दिखने लगती है। मान लो आपने 1200 शब्दों की एक Post लिखी, तो Home Page पर भी पूरी 1200 शब्द दिखेगी। अगर Home Page पर 9 Post हैं, तो 1400 शब्द एक साथ Load होगा। सोचो दादाभाई, 1200 शब्द, साथ में 6-7 Image। आपका Blog खुलेगा कैसे?

Table of Contents

इससे क्या होता है दादाभाई? आपका Blog देखने में बहुत बुरा लगता है। एकदम अस्त-व्यस्त सा लगता है। और सबसे बड़ी बात, आपका Blog बहुत Slow हो जाता है। User को 5-6 सेकंड तक Wait करना पड़ता है। आज के टाइम में कोई इतना Wait नहीं करता दादाभाई, वो सीधा Back Button दबाकर चला जाता है। मैंने खुद देखा है दादाभाई, जब मेरा Blog Slow था, तो मेरे 110 में से 65 User Back चले जाते थे।

बड़ी-बड़ी Website जैसे NDTV, Times of India या फिर बड़े-बड़े Blogger का Blog देखो। उनके Home Page पर कभी पूरी Post नहीं दिखती। सिर्फ एक छोटा सा हिस्सा, एक Thumbnail, Title और नीचे एक सुंदर सा Button - "Read More" या और पढ़ें।

जब User उस Button पर Click करता है, तभी पूरी Post खुलती है। इससे Blog एकदम Professional लगता है, Loading Speed 3 गुना तेज हो जाती है और सबसे बड़ी बात, आपका Page View भी बढ़ता है। Google भी ऐसे Blog को पसंद करता है।

तो आज मैं आपको वही सिखाऊंगा दादाभाई, Blogger में Custom Read More Button कैसे लगाते हैं। ये 3 तरीका है जो पूरा काम करता है। मैं खुद अपनी Website में यही Use करता हूँ। मेरा यकीन करो दादाभाई, इसमें कोई झंझट नहीं है। एक बार लगा दिया तो जिंदगी भर के लिए काम खत्म। आपको बार-बार लगाने की जरूरत नहीं पड़ेगी।

Read More Button असल में होता क्या है? और इसे लगाना इतना जरूरी क्यों है?

दादाभाई, आसान भाषा में समझाता हूँ। Read More Button एक पर्दे की तरह काम करता है।

सोचो आपने एक दुकान खोली। आपने दुकान के बाहर ही अपना सारा सामान रख दिया। अंदर कुछ नहीं रखा। तो Customer को बाहर से ही सब दिख जाएगा, वो अंदर क्यों आएगा? बिल्कुल वैसे ही, अगर आप Home Page पर ही पूरी Post दिखा दोगे, तो User Post के अंदर वाले Page पर क्यों जाएगा? वो तो वहीं से पढ़कर चला जाएगा।

Google का System भी ऐसा ही सोचता है दादाभाई। Google देखता है कि User Home Page पर आया और बिना अंदर गए चला गया। तो Google सोचता है कि आपके Blog में कोई गहराई नहीं है यार।

पहला नुकसान - Slow Speed।

जब Home Page पर 5-7 पूरी Post Load होगी, तो आपका Blog 10 सेकंड में खुलेगा। Google कहता है अगर Blog 3 सेकंड से ज्यादा में खुले, तो वो उसे Ranking में नीचे कर देता है। आज के टाइम में Speed ही सब कुछ है दादाभाई। अगर आपका Blog 2 सेकंड में खुला, तो User रुकेगा। 6 सेकंड में खुला, तो User भाग जाएगा।

दूसरा नुकसान - खराब Design और User Experience।

Home Page पर लंबी-लंबी Post देखने से Design एकदम खराब लगता है। User को समझ ही नहीं आता कहाँ से पढ़ना शुरू करे, कहाँ खत्म करे। Mobile में तो और भी बुरा लगता है। User को बहुत ज्यादा Scroll करना पड़ता है। इससे Bounce Rate बढ़ता है। Bounce Rate मतलब User बिना Click किए ही चला गया।

तीसरा नुकसान - कम Earning।

दादाभाई, ये सबसे बड़ा नुकसान है और यही सबसे जरूरी है। अगर User Home Page पर ही पूरी Post पढ़ लेगा, तो वो Post के अंदर नहीं जाएगा। Post के अंदर ही तो आपके Ads लगे होते हैं। AdSense के Ads, Sponsorship, Affiliate Link सब Post के अंदर ही तो होते हैं। अगर वो अंदर ही नहीं गया, तो Ad पर Click कैसे होगा? Earning कैसे होगी? इसीलिए Page View बढ़ाने के लिए Read More लगाना बहुत जरूरी है। जब User Read More पर Click करके अंदर जाएगा, तो Page View 1 से 3 हो जाएगा। Ad Impression भी Double हो जाएगा। मेरी खुद की Earning इसी वजह से Double हुई थी।

चौथा नुकसान - Duplicate Content और SEO Issue।

अगर Home Page पर भी वही Content है और Post Page पर भी वही Content है, तो Google Confuse हो जाता है कि असली Post कौन सी है। Home Page वाली या Single Post वाली? इससे Duplicate Content का Issue आ जाता है। कई बार Google Home Page को ही असली Post समझ लेता है और आपकी Single Post को Index ही नहीं करता। इससे आपकी Ranking कभी नहीं आएगी।

पांचवा नुकसान - Google AdSense Approval में दिक्कत।

दादाभाई, अगर आपने AdSense के लिए Apply किया है और आपके Home Page पर पूरी Post दिख रही है, तो AdSense कई बार Reject कर देता है। वो बोलता है Low Value Content या Poor Navigation। Read More लगाने से Navigation एकदम साफ हो जाता है और AdSense जल्दी Approve हो जाता है।

इसलिए दादाभाई, हर Professional Blogger Read More जरूर लगाता है। इससे Blog Fast होता है, सुंदर दिखता है, Ranking बढ़ती है और Earning भी 3 गुना हो जाती है। मैंने खुद इस Method को Use किया था, इसीलिए सोचा क्यों ना हम इसको आपके साथ शेयर करें।

Blogger में Read More नहीं लगाने से क्या होता है - एक सच्ची कहानी

दादाभाई, मैं आपको अपनी कहानी बताता हूँ। जब मैंने 2023 में पहला Blog बनाया था, तो मुझे Read More के बारे में कुछ नहीं पता था। मैं रोज Post लिखता था, Home Page पर पूरी Post दिखती थी। मेरे Blog में 60 Post हो गई, लेकिन Traffic 20-30 ही आता था।

मैंने Page Speed में Check किया, तो Score 30 आया। Mobile पर तो Blog खुलता ही नहीं था। फिर मैंने YouTube पर Search किया और मुझे पता चला Read More के बारे में। मैंने बस एक छोटा सा CSS Code लगाया और Jump Break Use किया।

विश्वास करो दादाभाई, 15 दिन के अंदर मेरा Blog एकदम बदल गया। PageSpeed 28 से 87 हो गया। Bounce Rate 75% से 52% पर आ गया। और मेरे Page Views 200 से 700 हो गए। क्योंकि अब User Home Page से अंदर जाता था। AdSense Earning भी 2 डॉलर से 6 डॉलर रोज की हो गई।

तभी मुझे समझ आया ये छोटा सा Button कितना Powerful है।

हम हर आर्टिकल में बोलते हैं, Blogger theme editor मे कोई भी changes करने से पहले Backup लेना बहुत जरूरी है दादाभाई।

Theme > Edit HTML में जाने के बाद ऊपर Backup/Restore का Button होगा। पहले अपने Theme का Backup Download कर लो। ताकि कुछ गड़बड़ हो तो वापस ला सको। ये आदत बना लो दादाभाई, Theme में कुछ भी करने से पहले Backup जरूर Download करना यार।

Blogger का खुद का Read More Button बिना Coding के, 2 मिनट में।

Method 1

दादाभाई, अगर आपको बिल्कुल भी Coding नहीं आती, आपको HTML, CSS का C भी नहीं पता, तो ये तरीका आपके लिए ही है। Blogger ने खुद ही अंदर में Read More का Option दिया हुआ है। बहुत लोगों को पता ही नहीं है, लेकिन ये सबसे Safe तरीका है।

Step 1: सबसे पहले Blogger Dashboard में जाओ और New Post पर Click करो। अपनी Post लिखो। जैसे आप हमेशा लिखते हो।

Step 2: अब जहाँ तक आप Home Page पर दिखाना चाहते हो, वहाँ Cursor रखो। जैसे आपने 1 Paragraph लिखे और आप चाहते हो Home Page पर सिर्फ 1 Paragraph ही दिखे, बाकी अंदर दिखे, तो दूसरे Paragraph के बाद Cursor रखो। मैं हमेशा पहले 145 शब्दों के बाद लगाता हूँ दादाभाई, ये सबसे Best रहता है।

Step 3: अब ऊपर देखो Editor में, वहाँ एक Icon है। एक कागज जैसा Icon जिसके बीच में एक लाइन है। उसको बोलते हैं "Insert Jump Break" कुछ Theme में उस पर लिखा होता है एक तीर का निशान। उस पर Click कर दो।

बस दादाभाई, हो गया आपका काम। अब वहाँ एक लाइन आ जाएगी, बीच में छोटे-छोटे Dot होंगे। अब जब आप Post को Publish करोगे, तो Home Page पर सिर्फ उसी लाइन तक की Post दिखेगी और नीचे लिखा आएगा "और पढ़ें" या "Read More"।

ये सबसे आसान तरीका है दादाभाई। इसमें कोई Code नहीं लगाना। कोई Theme Edit नहीं करनी।

लेकिन इसमें एक दिक्कत है। इसमें जो Button आता है वो बहुत ही Simple आता है। सिर्फ नीले रंग का एक Text Link। देखने में बिल्कुल भी अच्छा नहीं लगता। Professional नहीं लगता। User का ध्यान भी नहीं जाता उस पर। Mobile में तो वो बिल्कुल छोटा दिखता है। User को पता ही नहीं चलता कि वो Clickable है।

इसलिए अगर आपको एक सुंदर, रंग-बिरंगा Button चाहिए, जो देखते ही Click करने का मन करे, तो आपको Method 2 Use करना पड़ेगा। मैं खुद Method 2 ही Use करता हूँ।

Method 2

Stylish Custom Read More Button - जो 99% Professional Blogger Use करते हैं।

दादाभाई, ये Method 97% Blogger Use करते हैं। इसमें हम अपने Read More Button को अपने मनपसंद रंग में बना सकते हैं। लाल, हरा, नीला, नारंगी, Gradient वाला। जैसा आप चाहो। गोल Button, चौकोर Button, तीर वाला Button। सब बना सकते हो।

इसमें 2 Step है। पहले Step में हम Button को Design करेंगे और दूसरे Step में उसे Post में लगाएंगे।

Step 1: Theme में CSS Code डालना ध्यान से करो दादाभाई

सबसे पहले Blogger Dashboard में जाओ। वहाँ बाएं तरफ Theme का Option होगा, उस पर Click करो। फिर ऊपर छोटा सा तीर होगा, उस पर Click करके "Edit HTML" पर Click करो।

अब आपके सामने बहुत सारा Code आएगा। काला-काला, नीला-नीला। घबराना मत दादाभाई। आपको Code को छेड़ना नहीं है। आपको बस Keyboard पर Ctrl + F दबाना है और वहाँ ]]></b:skin> Search करना है।

ये Code आपको Theme के थोड़ा नीचे मिलेगा। जैसे ही ये मिलेगा, इसके ठीक ऊपर आपको नीचे वाला Code Paste कर देना है। ध्यान से, इसके ऊपर ही Paste करना है, नीचे नहीं 

यहाँ से Code Copy करें

/* Custom Blogger Read More Button */ .jump-link a { display: inline-block; background-color: #007bff; /* Button color */ color: #ffffff !important; /* Text color */ padding: 10px 20px; /* Size of the button */ text-decoration: none; font-weight: bold; border-radius: 4px; /* Rounded corners */ transition: background-color 0.3s ease; } .jump-link a:hover { background-color: #0056b3; /* Color when hovering */ text-decoration: none; }

दादाभाई, इस Code में क्या है समझो। background में Button का रंग है। मैंने यहाँ नारंगी और गुलाबी का Gradient दिया है जो सबसे ज्यादा Click होता है। YouTube की Research कहती है नारंगी रंग पर सबसे ज्यादा Click आता है। अगर आपको हरा चाहिए तो #ff6a00 की जगह #28a745 लिख दो। नीला चाहिए तो #007bff लिख दो।

border-radius: 50px से Button गोल हो जाता है। अगर आपको चौकोर Button चाहिए तो इसे 5px कर दो। padding: 10px 22px से Button का Size तय होता है। box-shadow से Button के पीछे हल्की सी परछाई आती है जिससे वो 3D लगता है।

Code Paste करने के बाद ऊपर Save Theme पर Click कर दो।

Step 2: Post में Jump Break लगाना।

अब वापस Method 1 की तरह अपनी Post में जाओ और जहाँ Read More दिखाना है वहाँ Jump Break Icon पर Click कर दो।

अब देखो जादू दादाभाई। Home Page पर जाकर देखो। अब वहाँ Simple नीला Link नहीं, बल्कि एकदम Stylish नारंगी-गुलाबी रंग का गोल Button आ रहा होगा। User देखते ही उस पर Click करेगा। Mobile में भी ये बहुत सुंदर दिखेगा।

ये तरीका सबसे Best है दादाभाई। Safe भी है और सुंदर भी। Google भी इसे पसंद करता है।

Method 3: Auto Read More with Thumbnail - सबसे Professional तरीका, बिना मेहनत के।

दादाभाई, ये तरीका सबसे Advance है। इसमें आपको हर Post में जाकर Jump Break लगाने की जरूरत ही नहीं है। Blogger खुद Automatic 145 शब्दों के बाद Read More लगा देगा और साथ में Post का Thumbnail भी दिखाएगा। जैसे बड़े News Website में होता है, जैसे AajTak, ABP News में होता है।

ये उन लोगों के लिए Best है जिनके Blog में 110-190 Post हैं और वो हर Post में जाकर Read More नहीं लगा सकते। या जो चाहते हैं कि उनका Home Page एकदम Magazine जैसा दिखे।

इसके लिए आपको Theme में थोड़ा Code बदलना पड़ेगा। ध्यान से करना दादाभाई, गलती मत करना।

Step 1: पहले Theme का Backup रखना बहुत लाभकारी होता है दादाभाई।

Theme > Edit HTML में जाने के बाद ऊपर Backup/Restore का Button होगा। पहले अपने Theme का Backup Download कर लो। ताकि कुछ गड़बड़ हो तो वापस ला सको। ये आदत बना लो दादाभाई, Theme में कुछ भी करने से पहले Backup रखना बहुत अच्छा होता है।

Step 2: Code Search करो।

Edit HTML में जाकर <data:post.body/> को Search करो। आपको ये 1-2 जगह मिलेगा। आपको दूसरा वाला लेना है जो b:if cond='data:post.isFirstPost' के आसपास होगा। पहला वाला मत लेना, दूसरा वाला लेना।

Step 3: उस Code को Replace करो ध्यान से।

उस <data:post.body/> को हटाकर उसकी जगह नीचे वाला Code डाल दो। Copy-Paste करो।

यहाँ से Code Copy करें

<b:if cond='data:blog.pageType != &quot;item&quot;'> <div class='post-snippet'> <data:post.snippet/> </div> <div class='jump-link'> <a expr:href='data:post.url'>और पढ़ें &#8594;</a> </div> <b:else/> <data:post.body/> </b:if>

दादाभाई, इसका मतलब क्या है? आसान भाषा में समझो इसका मतलब है - अगर User Home Page पर है (pageType != item), तो सिर्फ snippet यानी छोटा हिस्सा दिखाओ और Read More Button दिखाओ। लेकिन अगर User Post के अंदर है (else), तो पूरी Post body दिखाओ।

ये Code डालने के बाद Save कर दो।

अब आपका Blog एकदम Professional लगेगा दादाभाई। Home Page पर हर Post के साथ Thumbnail और छोटा सा Description और नीचे Read More Button। आपको कभी Manual Jump Break लगाने की जरूरत नहीं पड़ेगी। सब Automatic हो जाएगा। नया Post लिखोगे, Automatic Read More लग जाएगा।

Read More Button का Text कैसे बदलें? "Read More" की जगह "और पढ़ें" कैसे लिखें?

बहुत लोग पूछते हैं दादाभाई कि Read More की जगह अपना खुद का Text कैसे लिखें। जैसे "पूरा पढ़ें", "आगे पढ़ें", "Continue Reading", "पूरी खबर पढ़ें"।

बहुत आसान है दादाभाई।

Theme > Edit HTML में जाओ। वहाँ jumpText या jump-link Search करो।

आपको वहाँ ऐसा Code मिलेगा - <data:post.jumpText/> या फिर <a expr:href='data:post.url'><data:post.jumpText/></a>

बस इस <data:post.jumpText/> को हटा दो और अपनी मर्जी का Text लिख दो।

जैसे:

<a expr:href='data:post.url'>पूरा Article पढ़ें →</a>

या

<a expr:href='data:post.url'>आगे और पढ़ें</a>

या

<a expr:href='data:post.url'>Continue Reading →</a>

Save कर दो। अब आपका Custom Text दिखने लगेगा। आप Emoji भी लगा सकते हो जैसे "और पढ़ें।

Read More Button लगाते समय 3 गलतियां जो कभी मत करना दादाभाई, नहीं तो Blog खराब हो जाएगा।

1. Button को बहुत छोटा मत बनाना: बहुत लोग CSS में padding 5px कर देते हैं। इससे Button बहुत छोटा हो जाता है। Mobile में तो User की उंगली से Click ही नहीं होता। हमेशा Button की Height कम से कम 40px रखो और padding 10px 22px रखो। और Font Size 14px से कम मत रखना।

2. एक Post में 2 बार Jump Break मत लगाना: दादाभाई, ये सबसे बड़ी गलती है। एक Post में सिर्फ एक ही बार Jump Break Use करो। अगर 2 बार लगाओगे तो Blogger Confuse हो जाएगा और आपकी Post बीच में ही टूट जाएगी। Content गायब हो जाएगा। और Google में Error आ जाएगा।

3. Home Page पर पूरी Post मत दिखाना: दादाभाई, मैंने पहले भी बताया। Home Page पर पूरी Post दिखाने से Google Duplicate Content का Penalty दे देता है। और आपकी Earning भी आधी हो जाती है। हमेशा Read More Use करो। चाहे Post 110 शब्द की ही क्यों न हो। हमेशा Jump Break लगाओ।

FAQ - आपके मन में आने वाले 3 सवाल।

सवाल 1: क्या Read More लगाने से SEO पर असर पड़ता है?

जवाब: हाँ दादाभाई, बहुत अच्छा असर पड़ता है। Page Speed बढ़ती है, Bounce Rate कम होता है, Page View बढ़ता है। इन तीनों से SEO Ranking बढ़ती है। Google खुद कहता है Read More Use करो।

सवाल 2: क्या पुरानी Post में भी Read More लगाना पड़ेगा?

जवाब: हाँ दादाभाई, अगर आप Method 1 या 2 Use कर रहे हो, तो पुरानी Post में जाकर भी Jump Break लगाना पड़ेगा। लेकिन अगर Method 3 Use करोगे, तो Automatic सब में लग जाएगा।

सवाल 3: क्या Read More Button Mobile में काम करेगा?

जवाब: हाँ दादाभाई, तीनों Method Mobile में ज्यादा काम करते हैं। मैंने जो CSS दिया है, वो Mobile Friendly है।

आपने क्या सीखा?

दादाभाई, आपको कौन सा तरीका अपनाना चाहिए?

तो दादाभाई, मैंने आपको Blogger में Custom Read More Button लगाने के 3 सबसे आसान तरीका बता दिए, वो भी विस्तार से।

अगर आप बिल्कुल नए हो और Coding नहीं आती, तो Method 1 Use करो दादाभाई।

अगर आपको सुंदर Design चाहिए और आप चाहते हो आपका Blog Professional दिखे, तो Method 2 Best है। यही मैं आपको Recommend करूंगा। 92% Blogger यही Use करते हैं। मैं खुद यही Use करता हूँ।

और अगर आपके Blog में बहुत सारी Post हैं और आपको Thumbnail के साथ Auto Read More चाहिए, तो Method 3 Use करो।

मेरा यकीन करो दादाभाई, ये तीनों तरीका एकदम अच्छी तरह से Working है, मैंने खुद Try किया है। इसमें कोई नुकसान नहीं है।

तो बताओ दादाभाई, आपको कौन सा तरीका सबसे अच्छा लगा? आपने अपने Blog में कौन सा लगाया - Simple वाला, Stylish वाला या Auto वाला? और आपका Button किस रंग का है - नीला, हरा या नारंगी? अगर कोई परेशानी आए तो Comment में जरूर बताना दादाभाई।

मिलते हैं अगली Post में, बताऊंगा Blogger में File को 15 Second के Timer से Lock कैसे करें ताकि आपकी Earning 2 गुना हो जाए। वो Post भी एकदम धमाकेदार होगी।

तब तक के लिए धन्यवाद, जय हिंद।🙏