कॉपी बटन के साथ ब्लॉगर पोस्ट में कोड बॉक्स कैसे लगाएँ?

यह कोड बॉक्स उनके लिए काफी अच्छा है जो अपने वेबसाईट पर किसी तरह का स्क्रिप्ट या कोड प्रवाइड करते है। क्यूंकी इससे यूजर को कोड कॉपी करने में आसान हो जाता है। जिसके कारण वेबसाईट पर यूजर अच्छा इक्स्पीरीअन्स देता है। तो चलिए मैं आपको इस कोड को ब्लॉगर के पोस्ट में ऐड करने के स्टेप बताता हूँ। 

यह कोड बॉक्स ऐड करना बहुत ही आसान है केवल आप मेरे बताए गए स्टेप को सही तरीके से फॉलो करिए। 

How To Add Code Box With Copy Button In Blogger Post ?

नीचे आपको दो प्रकार के कोड दिए जा रहे हैं, जिनमे एक CSS और Java Script है और दूसरा HTML आपको CSS और Java Script को अपने थीम फाइल में ऐड करना है, और HTML को अपने ब्लॉगर पोस्ट में। 

तो चलिए सबसे पहले हम CSS और Java Script को अपने ब्लॉगर थीम में ऐड करते हैं। 

• सबसे पहले नीचे दिए गए CSS & Java Script को कॉपी करना है। 
• अब ब्लॉगर के डैश्बोर्ड में आना है, 
• इसके बाद थीम सेक्शन पर क्लिक करना है, 
• अब आपको Customize के साइड में एरो दिया है, उस पर क्लिक करना है। 
• इसके बाद Edit HTML पर क्लिक कीजिए
• अब आपको </body> टैग ढूँढना है , आप CTRL + F दबाकर सर्च भी कर सकते हैं। 
• अब पूरे कोड को पेस्ट कर दीजिए।
• इसके बाद save कर दीजिए। 

CSS & Java

<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> 

अब आपको HTML ऐड करना होगा, तो चलिए इसके बारे में भी जानते है। 

• सबसे पहले आपको नीचे दिए गए कोड को कॉपी करना है, 
• अब आपको एक नया पोस्ट या पेज क्रीऐट करना होगा, या आप अपने पुराने पोस्ट में भी ऐड कर सकते हैं। 
• अब पेंसिल जैसे आइकान पर क्लिक कीजिए, और HTML View को चुनिये। 
• इसके बाद आपको HTML कोड को अपने लेख में पेस्ट कर देना है। 
• अब आप दुबारा Compose View पर क्लिक कीजिए
• आपको जिस कोड को प्रवाइड करना है उसको कॉपी करिए और CTRL+Shift+V द्वारा पुराने कोड को रिप्लेस कर दीजिए। 

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>

इसके बाद आपका Code आपके ब्लॉगर पोस्ट में ऐड हो जाएगा, वो भी एक कॉपी बटन के कोड बॉक्स में। 

FAQ 1 : क्या यह कोड बॉक्स केवल ब्लॉगर के लिए है?

आप इस कोड बॉक्स को न केवल ब्लॉगर प्लेटफॉर्म के वेबसाईट पेज पर, बल्कि Wordpress पर भी इस्तेमाल कर सकते हैं। या आप अपने किसी पर्सनल होस्टेड वेबसाईट पर भी इसको डिजाइन कर सकते हैं।

FAQ 2 : क्या इस कोड बॉक्स के background color को बदल सकते हैं?

इसके background color को बदलने के लिए आपको, इसके css कोड में summary के अंदर background color को बदलना होगा।

FAQ 3 : इस Code Box के अंदर answer के फॉन्ट साइज़ को कैसे बढ़ाएँ?

इसके लिए भी आपको CSS Code में जाकर, Summary के अंदर Font-Size को बदलना होगा।