 |
| How to make Code Box On any website blogpost |
How to make Code Box On any website blogpost
Hello! Welcome to BongoBad Blog. Hope you are doing well.
If you want to fully understand this add to code box blog post to your visitors then you need to read that step by step carefully. How to add code box to your website is completely explained in this blog post. You will need HTML, CSS, Java Sprit all languages to add code box to blog post. So let's read how to add code box to blog.
How to make Code Box On any website blogpost
If you don't have any knowledge about coding language then you can set code box by copying from blog. Here's how to easily paste the code into your blog theme. Let's go read to How to make Code Box On any website blogpost
Please read to for How to make Code Box On any website blogpost
1. At the First of all Login to your Blogger Dashboard.
2. Second you can click to Theme option on your Blogger Dashboard.
3. Now go to Customize Arrow option
4. Now Click Edit HTML Option and go to inter page
5. Now,search the code </head> and paste the following CSS Codes just above to it.
<style>/*<![CDATA[*/
pre, .syntax-box {
--background: #fdfdfd;
--color: inherit;
--border: 1px solid #e6e6e6;
--border-radius: 4px;
--padding: 15px;
--font-size: 13px;
--font-family: "JetBrains Mono", monospace;
--line-height: 1.5;
--icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
--icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}
.dark-mode pre, .dark-mode .syntax-box {
--background: #252526;
--border: 1px solid rgba(255,255,255,.15);
}
.syntax-box,pre{background-color:var(--background);color:var(--color);border:var(--border);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);margin:30px 0}
pre{font-family:var(--font-family)}
pre code{padding:var(--padding);font-family:inherit;position:relative;white-space:pre;overflow-x:auto;margin:0;background:0 0}
.syntax-box{display:flex;min-height:calc(40px + var(--padding) * 2)}
.syntax-content{position:relative;overflow:hidden;width:100%}
.syntax-box pre{background:0 0;color:inherit;border:none;border-radius:unset;line-height:inherit;margin:0}
.syntax-lines{counter-reset:syntax-line;flex-shrink:0;display:flex;flex-direction:column;padding:var(--padding) 0;border-right:var(--border);line-height:var(--line-height);text-align:right;font-family:var(--font-family)}
.syntax-lines>::before{counter-increment:syntax-line;content:counter(syntax-line);padding:0 8px;opacity:.78}
.syntax-copy{position:absolute;top:var(--padding);right:var(--padding);display:inline-flex;align-items:center;background-color:var(--background);color:inherit;outline:0;padding:0;border:var(--border);border-radius:4px;cursor:pointer;opacity:0;transition:opacity .25s;z-index:3}
.syntax-box:hover .syntax-copy{opacity:1}
.syntax-copy::after{content:"";width:40px;height:40px;opacity:1;background-image:var(--icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat}
.syntax-copy:disabled::before{content:attr(data-copied);padding:0 10px;opacity:.8;border-right:var(--border)}
.syntax-copy:disabled::after{background-image:var(--icon-copied)}
/*]]>*/</style>6. Now add the following JavaScript Code just above </body> to tag. If you don't find it, please search on theme Edit option >> control F than search here.
<script type='module'>/*<![CDATA[*/
/**
* Codebox by Fineshop Design
* License: MIT
*/
!(({selector:a,texts:{copy:b,copied:c}})=>{const d=async a=>{if("string"!=typeof a)throw new TypeError("Argument 1 must be a string.");if("clipboard"in navigator)return await navigator.clipboard.writeText(a),a;const b=document.createElement("textarea");b.setAttribute("style","position: fixed; left: 100%; width: 0; height: 0; opacity: 0"),b.textContent=a,document.body.appendChild(b),b.focus(),b.select();const c=!!document.execCommand("copy");if(b.remove(),c)return a;throw new Error("Failed to copy text.")},e=document.querySelectorAll(a);e.forEach(a=>{const e=a.querySelector("code");if(e){const f=e.innerText.split(/\r|\r\n|\n/),g=document.createElement("div");g.className="syntax-lines",g.innerHTML=f.map(()=>"<span></span>").join("");const h=document.createElement("div");h.className="syntax-content";const i=document.createElement("button");i.type="button",i.className="syntax-copy",i.title=b,i.setAttribute("data-copy",b),i.setAttribute("data-copied",c),i.addEventListener("click",()=>{i.disabled=!0,i.classList.add("copied"),d(e.innerText),setTimeout(()=>{i.disabled=!1,i.classList.remove("copied")},3e3)});const j=document.createElement("div");j.className="syntax-box",a.insertAdjacentElement("beforebegin",j),h.appendChild(a),h.appendChild(i),j.appendChild(g),j.appendChild(h)}})})({selector:"pre:not(.no)",texts:{copy:"Copy",copied:"Copied"}});
/*]]>*/</script>7. Save the changes by clicking on this section SAVE Option
Now,That's done! Now When need to add code Box On your Blogpost than switch to HTML than past Codes in your Blog Posts. That"s given below
Code Is :
<pre><code>escaped_code_here</code></pre>How to add html code Box in blogger post (another tips in given below)
There are many other ways codes can be add Code box into your blog posts. Providing HTML Code is given below -
1. For Adding Code Box to any blog post firstly go to post or page section
2. Then Go to HTML View Mode On any Post Or page
3. And then past here HTML and CSS Code
<div class ="code">
আপনার কোড
</div>
<style>
.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }
</style>4. Listen, carefully: Then change mode into the compose view and past your desired Code
5. at the last Update your post
Conclusion
at the last i want to say about something that How to make Code Box On any website blogpost. If you read this blog step by step then surely you can use code box properly in your blog post. Still if you have any problem to add code box while writing your blog post then please let us know by commenting on this post. We will surely contact you and solve your problem. if for current solution please contact our contact us page .