How to Add a Code Box and Clipboard Copy Button in Blogger. In Hindi

How to Add a Code Box and Clipboard Copy Button in Blogger

हैलो फ्रेंड्स आज के इस लेख हम आपको बताएंगे कि आप How to Add a Code Box and Clipboard Copy Button in Blogger. इससे हमारे द्वारा दिए गए लम्बे कोड को एक क्लिक से ही कॉपी कर सकते हैं।

तो इस तरह से आप अपने विजिटर के लिए बेहतर अनुभव प्रदान कर सकते हैं और कई प्रकार के HTML, CSS, JavaScript कोड को अपने विजिटर के साथ आसानी से शेयर कर सकते हैं। तो चालिए बिना देरी किए शुरू करते हैं।

How to Add a Code Box and Clipboard Copy Button in Blogger

सबसे पहले आप अपने थीम का बैकअप ले लेना है अगर बाद में कोई दिक्कत आती है तो आप फिर से अपने थीम को रिस्टोर कर सकते हैं।

कॉपी बटन के साथ कोड बॉक्स जोड़ने के लिए आपको नीचे दिए गए स्टेप को फॉलो करें।

Step:1

सबसे पहले हम आपको एक CSS के लिए एक JavaScript कोड देंगे, उस कोड कॉपी कर लेना है और अपने ब्लॉगर थीम पर </body> टैग के ठीक उपर पेस्ट कर देना है।

CSS And JavaScript

<style>
  .K2_CBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;padding:10px;margin:30px 0 30px}
  .K2_CBox .CB_Heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
  .K2_CBox .CB_Heading span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
  .K2_CBox .C_box_main{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#004cbd;transition:all .3s ease;-webkit-transition:all .3s ease}.K2_CBox .C_box_main:hover{opacity:.8}.K2_CBox .C_box_main .CBox_icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center}
  .K2_CBox .C_box_main.copied{background:#2dcda7}
  .K2_CBox .C_box_main.copied .CBox_icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")}
  .K2_CBox pre{margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; white-space: pre-wrap;}
  .K2_CBox pre::before, .K2_CBox pre::after{content:''}
  .dark-Mode .K2_CBox{background:#2d2d30}.dark-Mode .K2_CBox pre{background:#252526;color:#fffdfc}
  .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
  @media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
  @keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
  @-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
  .darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
  </style>
<div id='toastNotif' class='tNtf'></div> 
<script>/*<![CDATA[*/ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>
      

Step:2

ब्लॉगर डैशबोर्ड में लॉग इन करें और एक नया ब्लॉग पोस्ट बनाएं और HTML View पर स्विच करें

नीचे दिए गए HTML कोड को कॉपी करें और अपने ब्लॉग पोस्ट पर पेस्ट करें।

<pre> टैग के अन्दर वो कोड डालें जिसे आप कॉपी करवाना चाहते हैं।

HTML

<!--[ Code Box 1 ]-->
  <div class='K2_CBox'>
    <div class='CB_Heading'>
      <span>HTML</span>
      <button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')">
        <i class='CBox_icn'></i>
      </button>
    </div>

    <!--Add Your Parse HTML code Here-->
    <div id='code1'>
      <pre>&lt;p&gt;This is a simple HTML code &lt;/p&gt;</pre>
    </div>
  </div>

अब आपका कोड बॉक्स आपकी ब्लॉगर वेबसाइट में Copy to clipboard button के साथ जुड़ गया है।

Step:3

जब भी आप इसमें कोई भी कोड कॉपी करवाने के लिए Add करेंगे तो उस कोड को Convert करना होगा यानि कि उसे पार्सर करना होगा। पार्सर करने के लिए एक वेबसाइट पर आपको जाना होगा और अपने कोड को वहां पर डालकर convert कर के उसे कॉपी कर लेना है और उस कोड <pre> टैग के अन्दर पेस्ट कर देना है।

HTML Parser Tool Online

https://www.tricksofit.com/

Step:4

यदि आप एक ही पेज पर कई कोड बॉक्स जोड़ना चाहते हैं तो आपको फिर से HTML कोड को कॉपी करना होगा और उस पर आईडी बदलना होगा। अगर आप दूसरा कोड लगाएंगे तो उस कोड में पांच जगह पर 1 दिखाई देंगे तो उस 1 को बदलकर 2 कर देना है। अगर आप तीसरा कोड लगाते हैं तो उसमें 3 कर देना है। इस तरह से आप आईडी बदल सकते हैं।

निष्कर्ष

तो दोस्तों आप How to Add a Code Box and Clipboard Copy Button in Blogger तो आप इस ट्रिक्स को फॉलो कर आप भी अपने ब्लॉगर में जोड़ सकते हैं और अपने विजिटर को आकर्षित कर सकते हैं और इस तरह की जानकारी प्राप्त करने के लिए हमारे वेबसाइट पर विजिट करते हैं।

Go to Link