How to make codebox with copy and and download button in blogger

 ब्लॉगर के लिए कॉपी और डाउनलोड बटन के साथ एक शानदार कोड बॉक्स बनाएं

क्या आप एक ब्लॉगर उपयोगकर्ता हैं जो एक आकर्षक और कार्यात्मक कोड बॉक्स के साथ अपनी वेबसाइट को बेहतर बनाना चाहते हैं? आगे कोई तलाश नहीं करें! इस व्यापक गाइड में, हम आपको दिखाएंगे कि आप अपनी ब्लॉगर वेबसाइट के लिए एक सुंदर कॉपी और डाउनलोड बटन के साथ एक कोड बॉक्स कैसे बना सकते हैं। यह सुविधा न केवल आपकी साइट के सौंदर्यशास्त्र में सुधार करेगी बल्कि आपके पाठकों को कोड स्निपेट कॉपी करने और डाउनलोड करने का एक सुविधाजनक तरीका भी प्रदान करेगी।

आपको कोड बॉक्स की आवश्यकता क्यों है?

कोड स्निपेट कई ब्लॉगों का एक अनिवार्य हिस्सा हैं, विशेष रूप से प्रोग्रामिंग, वेब विकास, या तकनीकी ट्यूटोरियल पर ध्यान केंद्रित करने वाले ब्लॉगों का। हालाँकि, केवल अपने ब्लॉग पोस्ट में कोड चिपकाने से इसे पढ़ना और कॉपी करना कठिन हो सकता है। एक कोड बॉक्स आपके कोड को बड़े करीने से व्यवस्थित करता है, जिससे पाठकों के लिए इसे समझना और उपयोग करना आसान हो जाता है। इसके अतिरिक्त, डाउनलोड बटन उपयोगकर्ताओं को भविष्य के संदर्भ के लिए कोड को सहेजने की अनुमति देता है, जिससे उपयोगकर्ता अनुभव बढ़ता है।

ब्लॉगर में कोड बॉक्स कैसे बनाएं

अपनी ब्लॉगर वेबसाइट पर एक सुंदर कॉपी और डाउनलोड बटन के साथ एक कोड बॉक्स जोड़ने के लिए इन सरल चरणों का पालन करें:

चरण 1: अपने ब्लॉगर डैशबोर्ड में लॉग इन करें

अपने ब्लॉगर डैशबोर्ड पर जाएँ और उस ब्लॉग का चयन करें जहाँ आप कोड बॉक्स जोड़ना चाहते हैं।

चरण 2: थीम संपादक तक पहुंचें

बाएं साइडबार में "थीम" पर क्लिक करें, फिर "HTML संपादित करें" बटन पर क्लिक करें।

चरण 3: सीएसएस कोड जोड़ें

<style> 
.pre{background:var(--synxBg);color:var(--synxC); direction: ltr} .pre:not(.tb){position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:var(--fontC)} .pre pre{margin:0;color:inherit;background:inherit} .pre:not(.tb)::before, .cmC i[rel=pre]::before{content:'';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:var(--synxGray);font-size:10px;padding:0 10px;z-index:2;line-height:30px} .pre:not(.tb).html::before{content:'.html'} .pre:not(.tb).css::before{content:'.css'} .pre:not(.tb).js::before{content:'.js'} .pre:not(.tb):hover::before{content:'Double click to copy | '} .pre:not(.tb).html:hover::before{content:'Double click to copy | .html'} .pre:not(.tb).css:hover::before{content:'Double click to copy | .css'} .pre:not(.tb).js:hover::before{content:'Double click to copy | .js'} .pre[data-text]:not([data-text='']):not(.tb)::before{content:attr(data-text)} .pre[data-text]:not([data-text='']):not(.tb):hover::before{content:'Double Click to Copy | ' attr(data-text)} pre, .cmC i[rel=pre]{display:block;position:relative;font-family:var(--fontC);font-size:13px;line-height:1.6em;border-radius:3px;background:var(--synxBg);color:var(--synxC);padding:30px 20px 20px;margin:1.7em auto; -moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre} pre i{font-style:normal} pre i.block{color:#fff;background:var(--synxBlue)} pre i.green{color:var(--synxGreen)} pre i.gray{color:var(--synxGray)} pre i.red{color:var(--synxOrange)} pre i.blue{color:var(--synxBlue)} code{display:inline;padding:5px;font-size:14px;border-radius:3px;line-height:inherit;color:var(--synxC);background:#f2f3f5;font-family:var(--fontC)} .pre,.pre pre{position:relative;border-radius:3px;direction:ltr}.pre,.preT{overflow:hidden}.preA,.preM{display:flex}.preA,.preT{white-space:nowrap}.pre{background:#f6f6f6;color:#2f3337;margin:1.7em auto}.pre pre{margin:0;color:inherit;background:inherit;display:block;font-size:13px;line-height:1.6em;padding:30px 20px 20px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto;white-space:pre}.pre.adv{border-radius:10px}.pre.adv::before,.pre.str .prTl,.pre:not(.str) .prCd{display:none}.pre.adv pre{padding-top:70px}.preM{position:absolute;top:0;right:0;left:0;width:100%;background:rgba(0,0,0,.05);padding:10px 10px 10px 20px;justify-content:space-between;align-items:center;flex-wrap:nowrap;z-index:2}.preT{font-size:12px;font-family:var(--fontC);line-height:1rem;position:relative;text-overflow:ellipsis;padding-right:10px}.preA{gap:8px}.preA button{outline:0;border:none;width:30px;height:30px;background:#d9d9d9;padding:0;margin:0;border-radius:50%;transition:border-radius .2s;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.preA button:hover{border-radius:40%}.preA button>svg{width:18px;height:18px;stroke:none;fill:#2e2e2e;transition:.5s}.pre.cpd .prCp svg,.pre.dwn .prDl svg,.pre.pnd .prDl svg{animation:1s jiggle}.pre.cpd .prCp svg .a,.pre.dwn .prDl svg .a,.pre.pnd .prDl svg .a,.pre:not(.cpd) .prCp svg .b,.pre:not(.dwn) .prDl svg .c,.pre:not(.pnd) .prDl svg .b{opacity:0}@keyframes jiggle{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(26deg)}40%,80%{transform:rotate(-26deg)}}@-webkit-keyframes jiggle{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(26deg)}40%,80%{transform:rotate(-26deg)}}
.drK .preM{background:#2b2c2f}
.drK .preA button{background:#252526}
.drK .preA button svg{fill:#d5d5d5}
pre{min-height: 150px;}
</style>

  

अपनी थीम के HTML कोड में क्लोजिंग </head> टैग का पता लगाएं और उसके ठीक ऊपर निम्नलिखित CSS कोड पेस्ट करें:

/* कोड बॉक्स के लिए सीएसएस कोड */

चरण 4: जावास्क्रिप्ट कोड जोड़ें

<script>/*<![CDATA[*/
const codeBox = {
      img: "https:www.dktechnozone.in/favicon.ico", /* Your favicon url */
      title: "by dk technozone" /* Your blog title */
};
/* Code_Box@main.js */ 0<document.querySelectorAll("div.pre.cdBox").length&&(()=>{let e=document.querySelectorAll("div.pre.cdBox");function t(e,t,a){if(a="string"==typeof a?a:"text/plain",t="string"==typeof t?t:"File_"+(new Date).getTime()+".txt",e){if(a=new Blob([e],{type:a}),navigator.msSaveBlob)return navigator.msSaveBlob(a,t);{let e=window.URL.createObjectURL(a),l=document.createElement("a");l.classList.add("hidden"),l.href=e,l.download=t,document.body.appendChild(l),l.click(),l.remove(),window.URL.revokeObjectURL(e)}}}for(let a=0;a<e.length;a++){let l=e[a];l.classList.add("adv");let n=l.dataset.text||"File_"+(new Date).getTime(),s=l.dataset.file||n,d=l.dataset.lang||".txt",i=void 0!==l.dataset.time?isNaN(Number(l.dataset.time))?"false"===l.dataset.time?0:10:Number(l.dataset.time):10,o=void 0===l.dataset.download||"true"==l.dataset.download,r=void 0===l.dataset.copy||"true"==l.dataset.copy,c=void 0===l.dataset.view||"true"==l.dataset.view,p=l.querySelector("pre"),m=p.innerText;l.insertAdjacentHTML("afterbegin","<div class='preM'><div class='preT'><span class='prTl'>"+(null==n?"&lt;/&gt;":n)+"</span><span class='prCd'></span></div><div class='preA'>"+(c?"\x3c!--[ Preview ]--\x3e<button class='prVw' aria-label='blob Button'><svg viewBox='0 0 24 24'><path d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/></svg></button>":"")+(o?"\x3c!--[ Download ]--\x3e<button class='prDl' aria-label='Download Button'><svg viewBox='0 0 24 24'><path class='a' d='M8 17V15H16V17H8M16 10L12 14L8 10H10.5V6H13.5V10H16M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z'/><path class='b' d='M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z'/><path class='c' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M7,15H17V17H7V15M10.3,11.2L8.4,9.3L7,10.7L10.3,14L17,7.3L15.6,5.9L10.3,11.2Z'/></svg></button>":"")+(r?"\x3c!--[ Copy ]--\x3e<button class='prCp' aria-label='copy Button'><svg viewBox='0 0 24 24'><path class='a' d='M20,16V4H8V16H20M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/><path class='b' d='M20,16V10H22V16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H16V4H8V16H20M10.91,7.08L14,10.17L20.59,3.58L22,5L14,13L9.5,8.5L10.91,7.08M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/></svg></button>":"")+"</div></div>");let v=l.querySelector(".prVw"),L=l.querySelector(".prDl"),w=l.querySelector(".prCp"),u=l.querySelector(".prCd");null!==v&&v.addEventListener("click",(()=>{var e="#252526",t=codeBox.img;e="<!DOCTYPE html><html><head><title>"+s.replace(/\./g,"").replace(/ /g,"_")+d+"</title><meta content='width=device-width,initial-scale=1,user-scalable=1,minimum-scale=1,maximum-scale=5' name='viewport'/><meta content='"+e+"' name='theme-color'/><meta content='"+e+"' name='msapplication-navbutton-color'/><meta content='"+e+"' name='apple-mobile-web-app-status-bar-style'/><link rel='shortcut icon' type='image/png' href='"+t+"'><style>body{min-height:100vh;background:#fff;color:#000}*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all;padding:12px}pre i{font-style:normal}</style></head><body><div class='pre'>"+p.outerHTML+"</div></body></html>",e=new Blob([e],{type:"text/html"}),window.navigator.msSaveOrOpenBlob?window.navigator.msSaveOrOpenBlob(blobObject,fileName):(e=window.URL.createObjectURL(e),window.open(e,"_blank"),window.URL.revokeObjectURL(e))})),null!==L&&L.addEventListener("click",(()=>{L.disabled=!0;let e=i;l.classList.add("pnd","str"),u.innerHTML=0!==i?"Please wait "+e+"s...":"Please wait...";let a=setInterval((()=>{0!==i&&--e,0!==i&&(u.innerHTML="Please wait "+e+"s..."),e<=0&&(clearInterval(a),setTimeout((()=>{u.innerHTML="Downloading...",setTimeout((()=>{l.classList.remove("pnd"),l.classList.add("dwn"),t(m,s.replace(/\./g,"").replace(/ /g,"_")+codeBox.title+d,"text/plain"),u.innerHTML="Download started...",setTimeout((()=>{l.classList.remove("dwn","str"),L.disabled=!1}),3e3)}),2e3)}),1e3))}),1e3)})),null!==w&&w.addEventListener("click",(()=>{var e=getSelection(),t=document.createRange();t.selectNodeContents(p),e.removeAllRanges(),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),w.disabled=!0,l.classList.add("cpd"),setTimeout((function(){l.classList.remove("cpd"),w.disabled=!1}),3e3)}))}})();
/*]]>*/</script>
  </b:if>
                 
  <style>
        .bottom-alert {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background-color: gray;
            color: #fff;
            padding: 6px 10px;
            text-align: center;
            display: none;
            
            border-radius: 9px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
           z-index: 999999999999;
        }
    </style>
<div class='bottom-alert' id='bottomAlert'>Code Copied!</div>

<script>
    var codeElements = document.querySelectorAll("pre");
    codeElements.forEach(function(element) {
        element.addEventListener("dblclick", function() {
            copyToClipboard(element);
        });
    });
    function copyToClipboard(element) {
        var tempTextArea = document.createElement("textarea");
        tempTextArea.value = element.textContent;
        document.body.appendChild(tempTextArea);
        tempTextArea.select();
        tempTextArea.setSelectionRange(0, 99999); 
        document.execCommand("copy");
        document.body.removeChild(tempTextArea);
        
        showBottomAlert();
    }
    function showBottomAlert() {
        var bottomAlert = document.getElementById("bottomAlert");
        bottomAlert.style.display = "block";
        setTimeout(function() {
            bottomAlert.style.display = "none";
        }, 3000);
    }
</script>
  

अपनी थीम के HTML कोड में समापन </body> टैग ढूंढें और उसके ठीक ऊपर निम्नलिखित जावास्क्रिप्ट कोड चिपकाएँ:

चरण 5: परिवर्तन Save करें 

अपने परिवर्तन लागू करने के लिए "थीम सहेजें" बटन पर क्लिक करें।

चरण 6: अपनी पोस्ट या पेज पर कोड बॉक्स जोड़ें

ब्लॉगर संपादक में HTML दृश्य पर स्विच करें और निम्नलिखित HTML कोड पेस्ट करें जहाँ आप कोड बॉक्स दिखाना चाहते हैं:

<!-- कोड बॉक्स के लिए HTML कोड -->

<div class='pre cdBox'>

  <pre>

<!--Your code here -->

  </pre>   

  </div>
  

चरण 7: कोड बॉक्स को कस्टमाइज़ करें

आप आवश्यकतानुसार सीएसएस, जावास्क्रिप्ट और HTML कोड को संशोधित करके कोड बॉक्स के स्वरूप और व्यवहार को अनुकूलित कर सकते हैं।

निष्कर्ष

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

Last word

In this post we will provided information about How to make codebox with copy and and download button in blogger, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.