Blogger में Copy Button वाला Code Box कैसे लगाएं? (Pro Trick)

नमस्कार दादाभाई, कैसे हो आप सब? स्वागत है आपका फिर से एक नए Post में। देखो दादा आज हम बहुत ही काम की चीज सीखने वाले हैं। अगर आप Blogger पर Blog लिखते हो, खासकर Technology, Blogging Tips या Coding के बारे में लिखते हो, तो आपने देखा होगा Post में Code डालना कितना मुश्किल है यार।

जब हम ऐसे ही Code Paste कर देते हैं तो वो पूरी Post में फैल जाता है। देखने में एकदम बेकार लगता है। User को Copy करने में बहुत दिक्कत होती है, खासकर Mobile में तो Code Copy करना मतलब जंग लड़ने जैसा है। पूरी Screen हिलती है, Code आधा Copy होता है।

और दूसरी तरफ आपने Teckpas.com जैसी बड़ी-बड़ी Website देखी होगी। वहां Code एक सुंदर से काले डब्बे में दिखता है। ऊपर लिखा होता है HTML Code, CSS Code और बगल में एक छोटा सा Copy Button होता है। User बस एक Click करता है और पूरा Code Copy हो जाता है। कितना Professional लगता है ना?

तो आज मैं आपको बिना Theme को हाथ लगाए, बिना Coding सीखे, सीधा Post में Copy Button वाला Code Box कैसे लगाते हैं वो सिखाऊंगा। ये सबसे आसान तरीका है दादा।

Table of Contents

Code Box क्या होता है?

आसान भाषा में समझो दादा, Code Box एक छोटा सा डब्बा है। जैसे हम अपने घर में कोई जरूरी चीज को एक डब्बे में रखते हैं ताकि वो खोए नहीं और सुंदर लगे, वैसे ही Blog में Code को भी एक डब्बे में रखते हैं।

मान लो आपने एक बहुत अच्छा HTML Code बनाया। अब आप चाहते हो लोग उसे अपनी Website पर Use करें। अगर आप उस Code को ऐसे ही अपनी Post में लिख दोगे तो क्या होगा? Blogger समझेगा कि ये Code आपकी Post को चलाने के लिए है। वो उस Code को चलाने की कोशिश करेगा और आपकी पूरी Post का Design टूट जाएगा यार।

इसलिए हम Code को एक Box के अंदर बंद करके दिखाते हैं। इससे Blogger को पता चलता है कि ये सिर्फ दिखाने के लिए है, चलाने के लिए नहीं। और User को भी पता चलता है कि हाँ, ये एक Code है।

Blogger में सीधा Code डालने से क्या दिक्कत होती है?

बहुत से नए Blogger यही गलती करते हैं दादा। वो सीधा Post Editor में Code Paste कर देते हैं। इससे 3 बड़ी दिक्कत होती है।

पहली दिक्कत - Post टूट जाती है। जैसा मैंने बताया Blogger उस Code को चलाने की कोशिश करता है।

दूसरी दिक्कत - Code पढ़ने में बहुत मुश्किल होती है। Code एक लाइन में चिपका-चिपका सा दिखता है। समझ ही नहीं आता कहां से शुरू है और कहां खत्म।

तीसरी दिक्कत - User आपकी Post से भाग जाता है। आजकल कोई भी User मेहनत नहीं करना चाहता। अगर उसे Code Copy करने में दिक्कत होगी तो वो दूसरी Website पर चला जाएगा। तो इसलिए दादा Code Box लगाना बहुत जरूरी है।

Copy Button क्यों लगाना बहुत जरूरी है?

देखो दादा मैं आपको सच बताता हूँ। अगर आज के जमाने में आप Code Box में Copy Button नहीं लगाओगे तो आपकी Post Adhuri है।

सोचो आपने 100 लाइन का CSS Code दिया है। User को वो Code बहुत पसंद आया। अब उसे Copy करना है। अगर Button नहीं है तो उसे माउस से 100 लाइन Select करनी पड़ेगी। Laptop में तो फिर भी हो जाएगा, लेकिन Mobile में? दादा Mobile में 100 लाइन Select करना असंभव है।

लेकिन अगर एक Copy Button लगा है तो? User बस उस Button पर Click करेगा और 1 Second में पूरा Code Copy हो जाएगा। ऊपर लिखा आ जाएगा - Copied!

इससे 3 बहुत बड़े फायदे होते हैं।

1. User खुश हो जाता है। उसको लगता है यार ये बंदा Pro Blogger है, मेरे बारे में सोचता है। वो आपकी Site को बार-बार Visit करेगा।

2. Bounce Rate कम होता है। जब User आपकी Post पर ज्यादा देर रुकेगा तो Google को लगेगा आपकी Post अच्छी है। Google आपकी Post को Rank में ऊपर ले जाएगा।

3. आपकी Post एकदम Professional लगती है। एक छोटा सा Copy Button आपकी Post को Teckpas जैसी बड़ी Website जैसा बना देता है।

Blogger Post में Copy Button वाला Code Box कैसे लगाएं? - Step by Step - Direct Post वाला तरीका।

दादा ये तरीका सबसे आसान है। इसमें आपको Theme Edit करने की कोई जरूरत नहीं है। आपको Coding भी नहीं आनी चाहिए। बस Copy-Paste करना है।

Step 1: अपने Code को Parse करना - सबसे जरूरी।

 ये Step कभी मत भूलना। अगर ये भूल गए तो Post टूट जाएगी यार।

आपका जो भी Original Code है, जैसे <div>hello</div> उसको आप सीधा Blogger में नहीं डाल सकते। आपको पहले उसे Parse करना पड़ेगा। Parse मतलब Code को बदलना ताकि Blogger उसे Code समझे, Design नहीं।

Google पर जाओ और Search करो - Blogger HTML Parser Tool। कोई भी पहली Website खोलो। वहां एक Box मिलेगा। उसमें अपना Original Code Paste करो और Parse बटन पर Click कर दो। आपका Code बदल जाएगा। जैसे <div> बदल कर &lt;div&gt; हो जाएगा। अब उस बदले हुए Code को Copy कर लो।

Step 2: Blogger Post को HTML View में खोलो।

अब अपने Blogger Dashboard पर जाओ। New Post पर Click करो। Post Editor खुलेगा। ऊपर आपको Pen Icon दिखेगा। उसके बगल में ही <> जैसा एक Icon है उसको बोलते हैं HTML View। उस पर Click कर दो।

Step 3: अब नीचे वाला Ready-Made Code Paste करो।

दादा मैंने आपके लिए दो Ready-Made Code बनाया है। इसमें Copy Button भी है, सुंदर Design भी है। आपको बस इसे Copy करके अपनी Post में जहां Code दिखाना है वहां Paste कर देना है।

Code copy करो

<blockquote id="myInput">Code Copy करने में दिक्कत हो रही है? यहाँ पर आपको एकदम साफ़ और Mobile Friendly Code Box मिल जाएगा, साथ में Copy Button भी है। </blockquote> <button class="k2-copy-button" id="k2button"><svg aria-hidden="true" height="1em" preserveaspectratio="xMidYMid meet" role="img" viewbox="0 0 24 24" width="1em" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M13 6.75V2H8.75A2.25 2.25 0 0 0 6.5 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9A2.25 2.25 0 0 0 20 17.25V9h-4.75A2.25 2.25 0 0 1 13 6.75z" fill="currentColor"><path d="M14.5 6.75V2.5l5 5h-4.25a.75.75 0 0 1-.75-.75z" fill="currentColor"><path d="M5.503 4.627A2.251 2.251 0 0 0 4 6.75v10.504a4.75 4.75 0 0 0 4.75 4.75h6.494c.98 0 1.813-.626 2.122-1.5H8.75a3.25 3.25 0 0 1-3.25-3.25l.003-12.627z" fill="currentColor"></path></path></path></g></svg>Copy</button> <style> .k2-copy-button svg{margin-right: 10px;vertical-align: top;} .k2-copy-button{ height: 45px; width: 155px; color: #fff; background: #265df2; outline: none; border: none; border-radius: 8px; font-size: 17px; font-weight: 400; margin: 8px 0; cursor: pointer; transition: all 0.4s ease;} .k2-copy-button:hover{background: #2ECC71;} @media (max-width: 480px) {#k2button{width: 100%;}} </style> <script> function copyFunction() { const copyText = document.getElementById("myInput").textContent; const textArea = document.createElement('textarea'); textArea.textContent = copyText; document.body.append(textArea); textArea.select(); document.execCommand("copy"); k2button.innerText = "Text copied"; textArea.remove(); } document.getElementById('k2button').addEventListener('click', copyFunction); </script>

बस दादा हो गया। अब आप फिर से Pen Icon पर Click करके Normal View में आ जाओ। और Preview करके देखो। आपका सुंदर सा Code Box Copy Button के साथ तैयार है।

जब User Copy पर Click करेगा तो Button का Color हरा हो जाएगा और लिखा आएगा Copied! 2 Second बाद फिर से Copy हो जाएगा। कितना Pro लगता है ना?

इस Code Box को और सुंदर कैसे बनाएं?

दादा अगर आप चाहो तो ऊपर वाले Code में थोड़ा बदलाव करके उसे और Pro बना सकते हो यार। मैंने ये Trick Use किया है मेरी Site पर ये काम कर रहा है।

Code copy करो

<div style="border:1px solid #e0e0e0; border-radius:10px; margin:25px 0; overflow:hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);"> <div style="background:#f7f7f7; padding:12px 15px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e0e0e0; font-family:sans-serif;"> <span style="font-weight:bold; color:#333; font-size:14px;">📋 HTML Code</span> <button onclick="copyCodeBox(this)" style="background:#007bff; color:#fff; border:none; padding:6px 14px; border-radius:5px; cursor:pointer; font-size:13px; font-weight:bold;">Copy</button> </div> <pre style="margin:0; padding:18px; background:#fafafa; overflow-x:auto; white-space:pre-wrap; word-wrap:break-word; font-family:monospace; font-size:14px; color:#333; line-height:1.6;"><code>यहाँ पर अपना Parsed Code Paste करो उदाहरण के लिए - &lt;h1&gt;Hello Dada&lt;/h1&gt; </code></pre> </div> <script> function copyCodeBox(btn){ var codeText = btn.parentElement.nextElementSibling.innerText; navigator.clipboard.writeText(codeText); var oldText = btn.innerText; btn.innerText = "Copied ✓"; btn.style.background = "#28a745"; setTimeout(function(){ btn.innerText = oldText; btn.style.background = "#007bff"; }, 2000); } </script>

जैसे ऊपर लिखा है 📋 HTML Code। अगर आप CSS Code दिखा रहे हो तो वहां  🎨 CSS Code लिख दो। Javascript दिखा रहे हो तो ⚡ Javascript Code  लिख दो। इससे User को तुरंत पता चल जाएगा ये कौन सा Code है।

और अगर आपको काला वाला Box चाहिए जो आजकल बहुत Trend में है, तो background:#fafafa को background:#1e1e1e  कर दो और color:#333 को color:#d4d4d4 कर दो। आपका Box एकदम Hacker जैसा काला बन जाएगा।

Code डालते समय 5 गलतियां कभी मत करना यार।

1. बिना Parse किए कभी Code मत डालना दादा। Post टूट जाएगी।

2. एक Post में 2 से ज्यादा Color के Box मत Use करना। Simple रखो, वही Professional लगता है।

3. Code Box के अंदर Code को एकदम चिपका कर मत लिखना। थोड़ी जगह छोड़ना ताकि पढ़ने में आसान लगे।

4. हर Post में अलग-अलग Box का Design मत बदलना। एक ही Design Use करो। इससे आपकी पहचान बनेगी।

5. Copy Button को कभी बहुत छोटा मत बनाना। Mobile में User की उंगली से Click होना चाहिए।

मैंने खुद ये वाला Box अपनी Teckpas.com Site पर पिछले 1 साल से Use कर रहा हूँ, बहुत अच्छा चल रहा है यार।

आखिर बात

तो दादा देखा आपने? बिना Theme को हाथ लगाए, सिर्फ Direct Post में Code Box with Copy Button लगाना कितना आसान है।

आपको बस ऊपर वाला Code Copy करना है और अपनी Post में Paste कर देना है। बस। आपकी Post भी एकदम Teckpas जैसी Pro लगेगी।

मैं तो यही बोलूंगा दादा, आज से ही अपनी हर Code वाली Post में ये Box Use करना शुरू कर दो। User भी खुश होगा और Google भी खुश होगा। AdSense का Approval भी जल्दी मिलेगा।

अगर Code लगाने में कोई भी दिक्कत आए तो नीचे Comment कर देना दादा, मैं तुरंत आपकी Help कर दूंगा।

Post अच्छी लगी हो तो अपने Blogger दोस्तों के साथ Share जरूर करना यार।

धन्यवाद दादा। फिर मिलते हैं एक नई Post के साथ। 🙏