How To Add Code Box with Copy Button in Blog posts and pages

Welcome friend, बहुत-बहुत स्वागत है आपको Teckpas.com साइट पर। इस post में हम एक simple code box and copy button के साथ दिया है। उसीके बारे में आलोचना करेंगे। कोड बॉक्स के साथ कॉफी बटन कैसे ऐड करेंगे आपकी ब्लॉगर posts अर pages पर। इस पोस्ट में स्टेप बाय स्टेप गाइड करेंगे।

How To Add Code Box with Copy Button in Blog posts and pages.

दोस्तों, आज की date में code programming, web design, blogging ओर digital markeing blog में code share करना बहुत आम बात है। यदी आप html, css, और javascript, php, Python या किसी भी programming language में पोस्ट लिखते हैं तो, कोड को अपना blogger पर अच्छी तरह से प्रदर्शित करना बहुत महत्वपूर्ण होता है।

Blog post में code प्रदर्शित नहीं करने से पाठक के लिए पढ़ना और कॉपी करना बहुत कठिन काम हो जाता है। इसलिए professional blogger "code box" के साथ "copy button" use करते हैं। जहां कोर्ट एक अलग box की अंदर प्रदर्शित होता है। और एक "copy button" होता है। परिणाम स्वरुप visitor केवल एक क्लिक में संपूर्ण कोड कॉपी कर सकता है।

📦 इस पोस्ट में हम सीखेंगे।

🟩 कोड बॉक्स क्या है?

🟩 कॉफी बटन का उसे कैसे करें?

🟩 ब्लॉगर में कोड बॉक्स जोड़ने का नियम।

🟩 वर्डप्रेस में कोड बॉक्स जोड़ने का नियम।

🟩 जावास्क्रिप्ट के साथ कॉफी बटन बनाए।

🟩 responsible डिजाइन बनाना।

🟩 उपयोग करता की अनुभव को बेहतर बनाते की शुक्रिया।

📦आइए शुरू करें।

📦 कोड बॉक्स क्या है?

Code box एक विशेष रूप से डिजाइन किया गया container है। जहां programming code प्रदर्शित होता है।

Box की भीतर code डालने से अधिक अच्छे और प्रोफेशनल दिखता है।

👇 Copy Your Code.

<blockquote id="myInput"> Now try it yourself. First create a demo blog post and see if everything is working properly. If you get stuck somewhere, please comment us. </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: #1226de; outline: 2px; border: 2pX; border-radius: 8px; font-size: 17px; font-weight: 400; margin: 8px 0; cursor: pointer; transition: all 0.4s ease;} .k2-copy-button:hover{background: #12ff76;} @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>

📦 Code box की मुख्य लाभ क्या है?

◻️ code को पढ़ना आसान होता है।

◻️ डिजाइन प्रोफेशनल दिखता है।

◻️ sintex हाईलाइट को जोड़ा जा सकता है।

◻️ copy बटन का use किया जा सकता है।

◻️ यूजर्स की अनुभव में सुधार होता है।

📝 Copy button का use कैसे करें?

जब कोई visitor आपके ब्लॉक पोस्ट से कोड का use करना चाहते हैं, तो उसे आमतौर पर code का use करना और कॉपी करना होता है। box की बहार कॉपी बटन नहीं होने से अधिक समय लगता है copy करने से। गलत तरीके से कॉपी किया जा सकता है,और मोबाइल पर copy करना बहुत कठिन होता है।

Also Read- How to create automatic internal link in blogger post

📝 Copy button का use क्यों करें?

✅️एक click में कोड copy हो जाएगा।

✅️user को संतुष्टि मिलेगी।

✅️ साइट का bounce rate कम हो जाएगा।

✅️ post का professional लुक आएगा

।

✅️ पोस्ट का seo शुक्रिया में increase होगा।

✅️ search engine अच्छी तरह से पोस्ट को कॉल करेगा।

✅️ पोस्ट को बहुत beautiful लगेगा।

📦 Why code box with copy button is important?

Code box and copy button are very important features in a current technology and programming or codings blog.

Code box के साथ copy button को लगाने से बॉक्स अधिक professional दिखता है। और पाठक के लिए code का use करना भी बहुत आसान हो जाता है। आप html, css और javascript का use करके इस सुविधा को आसानी से अपने ब्लॉगर, वर्डप्रेस, और कस्टम वेबसाइट पर जोड़ सकते हैं।

if you add more advanced features, you can add syntax highlighting using Prism.js or Highlight.Js, और एक copy बटन जोड़ने से आपका विजिटर केबल एक क्लिक मैं copy कर सकेगा जिसमें उनका user experience बेहतर हो जाएगा।

Also Read- Free online HTML parser tool for blogger

📦 कोड बॉक्स में कॉपी बटन जोड़ने का सबसे बड़ा लाभ क्या है?

📝 Copy बटन जोड़ने का सबसे बड़ा फायदा यह है कि user को manual रूप से code का कॉपी नहीं करना पड़ता है। खासकर मोबाइल यूजर के लिए यह बहुत जरूरी फीचर्स है। कोड बॉक्स में एक कॉपी बटन और समस्या का समाधान होता है। और इसका उपयोग direct ब्लॉक पोस्ट में किया जा सकता है।

📦 कोड बॉक्स मूल रूप से font और numbering के साथ प्रदर्शित किया जाता है। पाठक आसानी से समझ सकता है। यह एक कोड snippet है।

📦 Can code Box with copy button be useful for SEO?

code box and copy button भी लाभकारी भूमिका निभाता है। Code बॉक्स का use करने से किसी वेबसाइट को सीधे अच्छे rank नहीं मिलता है। लेकिन यह visitor की अनुभव में सुधार करता है। जब कोई visitor आपकी साइट पर अधिक समय तक रहते हैं, और post पोस्ट को अच्छी तरह से पड़ता है शुरू से लेकर end तक तो google search engine आपकी साइट को अधिक मूल्यवान मान सकता है। और पेज को crawl करना शुरू कर देता है।

Friends, एक सामान्य गलती जो कोई blogger करते हैं, वह है कोड box का use कहते हैं, लेकिन कॉपी बटन use नहीं जोड़ता है। इससे यूजर्स को फिर से मैन्युअल रूप से code का copy करना पड़ता है। इसलिए आधुनिक ब्लॉगर के लिए सबसे अच्छा तरीका कोड बॉक्स और कॉपी बटन एक साथ use करता।

दोस्तों, एक जरूरी बात है, कोड बॉक्स के साथ copy बटन, box का डिजाइन सब एक जैसा नहीं होता है। deferent-deferent टाइप का होता है। content क्रिएटर को जो box अच्छा लगता है blogger theme की हिसाब से, वह उस डिजाइन का बॉक्स use कर सकते हैं Click Next button (DEMO) Box पर क्लिक करके कोड बॉक्स का अलग-अलग डिजाइन आप देख सकते हैं। और कॉपी भी कर सकते हैं। जो code box आपको अच्छा लगे उस बॉक्स की code को आप कॉपी करके साइट पर use कर सकते हैं। कोड बॉक्स की भीतर आपका कोड पेस्ट करने से पहले Online parser tool use जरूर करें। मदद से कोड को एक बार पास जरूर कीजिए। पास करने से एक फायदा होगा उसे कोड को भीतर किसी भी तरह अनवांटेड कोड रहता है तो उसे अनवांटेड पार्ट हटकर साफ सुथरा हो जाएगा

Friends, आप नियमित रूप से tutorials post, blogger platform पर upload करते हैं तो, हर एक पोस्ट में कोड बॉक्स के साथ कॉफी बटन डिजाइन का use करने का प्रयास कीजिए। इसमें आपकी वेबसाइट का पहचान बढ़ेगी और पाठक आपकी सामग्री को आसानी से access कर सकेगा। इसके अलावा code बॉक्स में padding और margin का उपयोग करना चाहीई नहीं तो कोड jam हो जाएगा। एक साफ सुथरा डिजाइन पाठक को अधिक आकर्षित करता है।

दोस्तों, अंत में बताना चाहेंगे कोड बॉक्स और कॉपी बटन केवल एक डिजाइन सुविधा नहीं है, बल्कि एक महत्वपूर्ण user experience उपकरण है। इस के लिए code का उपयोग करना आसान हो जाता है। ब्लॉग अधिक प्रोफेशनल दिखता है और आपकी सामग्री का मूल्य बहुत ज्यादा बढ़ सकता है। चाहे आप ब्लॉगर वर्डप्रेस या कास्टम वेबसाइट का उपयोग करते हैं तो एक सुंदर कोड बॉक्स और प्रभावी कॉपी बटन अपने तकनीकी ब्लॉग को अधिक आकर्षक और उपयोग करता की अनुकूल बना देगा.

इसलिए यदि आपने अभी तक इस सुविधा को आपने ब्लॉक में नहीं जोड़ा है तो अभी जोड़ना शुरू कर दीजिए और अपने विजिटर की अनुभव को बेहतर कीजिए। और user experience को सुनिश्चित करें।

धन्यवाद।🙏