How To Add Code Box With Copy Button In Blogger Post

Today in this article I will tell you How To Add Code Box With Copy Button In Blogger Post. Blogger is the best platform for newbies bloggers who want to start their blogging journey. It gives you all options to make your blog beautiful and make your blogger blog look like a professional blog.

There are many professional blogs hosted on blogger And every blogger starts their Blogging journey from Google Blogger and then move to any other blog. It gives you an option to edit your blogger blog Theme according to your choice. Just you need some basic knowledge of HTML, CSS and (JS) Javascript.

Why Do You Need Code Box or Syntax Highlighter In Blogger Post?

When you write blog post about blogger tutorials on your blog you may have shared code in blog post for your readers. It's good to share that codes in a separate code box or code snippet box in a way that it looks stylish. And it's helpful for your visitors because they can copy the code easily from code box. Sometimes the codes look ugly and take a lot of space on the blog post. So you need to Add Code Box With Click To Copy Button In Blogger Post. Follow These Steps to Insert Code Box In Blog Post.

How To Insert Code Box With Click To Copy Button In Blogger Post.

1. Go to your Blogger Dashboard.
2. Select Theme Section.
3. After that, Select Edit HTML from drop down menu.
4. You will see an HTML Code, click anywhere in the code box.
5. Now Press Ctrl + F and search for </body> tag.
6. Copy and paste below code above/before </body> tag.

Code

<style>
/* Codebox by Blogger 4 Ever */
.B4eBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:20px;margin:30px 0 30px}
.B4eBox .B4eBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.B4eBox .B4eBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.B4eBox .B4eBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#056aff;transition:all .3s ease;-webkit-transition:all .3s ease}
.B4eBox .B4eBoxB:hover{opacity:.8}
.B4eBox .B4eBoxB .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}
.B4eBox .B4eBoxB.copied{background:#2dcda7}
.B4eBox .B4eBoxB.copied .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>")}
.B4eBox pre{min-height:200px;margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.B4eBox pre::before, .B4eBox pre::after{content:''}
.darkMode .B4eBox{background:#2d2d30}
.darkMode .B4eBox pre{background:#252526;color:#fffdfc}
.B4eNtf 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){.B4eNtf 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 .B4eNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}</style>
<div id='B4eNotif' class='B4eNtf'></div>
<script>/*<![CDATA[*/ /* Codebox Script by Blogger 4 Ever */ 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("B4eNotif").innerHTML="<span>Copied To Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>

7. Now Click On "Save" Theme and your done!

How To Use Click To Copy Code Box In Blogger Post.

To use Code Box in your post just follow the following steps.
1. Create + New Post.
2. From Post Editor Select HTML View from the drop-down menu.
3. Then, Copy below code and paste it where you want it to appear.

Code

<!--[ Code Box 1 ]-->
<div class='B4eBox'>
<div class='B4eBoxH'>
<span>HTML</span>
<button id='copy1' class='B4eBoxB' onclick="copyC('copy1','code1')">
<i class='icn'></i>
</button>
</div>
<div id='code1'>
<pre>Your-HTML-Code-Here</pre>
</div>
</div>

<!--[ Code Box 2 ]-->
<div class='B4eBox'>
<div class='B4eBoxH'>
<span>CSS</span>
<button id='copy2' class='B4eBoxB' onclick="copyC('copy2','code2')">
<i class='icn'></i>
</button>
</div>
<div id='code2'>
<pre>Your-CSS-Code-Here</pre>
</div>
</div>

<!--[ Code Box 3 ]-->
<div class='B4eBox'>
<div class='B4eBoxH'>
<span>JS</span>
<button id='copy3' class='B4eBoxB' onclick="copyC('copy3','code3')">
<i class='icn'></i>
</button>
</div>
<div id='code3'>
<pre>Your-JS (Javascript)-Code-Here</pre>
</div>
</div>

4. Replace "Your-HTML-CSS-JS-Code-Here" with your desired code in each box.
6. Now click on Preview or Publish Button to see it live.
You have successfully added code box with click to copy button in blogger post.

How To Show or Display More than 3 Code Box In Blogger Post?

If you want to display more than 3 code boxes in same Blogger Post Simply Add below code and change its values.

Code

<!--[ Code Box 3 ]-->
<div class='B4eBox'>
<div class='B4eBoxH'>
<span>Your-Heading-Here</span>
<button id='copy3' class='B4eBoxB' onclick="copyC('copy3','code3')">
<i class='icn'></i>
</button>
</div>
<div id='code3'>
<pre>Your-Code-Here</pre>
</div>
</div>

1. Replace Code Box Number with your desire number as 4.5 or 6..
2. Replace Your-Heading-Here with your heading as CODE, HTML, CSS, JS (Javascript), Jquery etc..
3. Replace All Numbers with your codebox number.

That's it.... Your Done!

HTML Encoder/Parser Tool

For beginners to generate code snippets for HTML may be confusing and complex, You can try online HTML encoder/parser tool. By using this online HTML encoder/parser tool, you can quickly escapse HTML characters from your code snippets and use them in your blogger post content.

Conclusion:
Did you find this article How To Add Code Box With Copy Button In Blogger Post helpful? If you have any problem related to this tutorial, comment below and do not forget to share it.

You might also like: How To Use Automatic And Custom Permalink In Blogger Blogspot