Add Code Box in Blogger Post (Jirale.com)

Hello! How are you all Hope everyone is well. Welcome to today's article.

Are you trying to display the code in the blog post? But can't do it? Don't worry because I'm here to help you.

Today I will show you how to show code in a blogger post. If you share the codes in a code box, it will look nice and it will help the visitors to read and copy that code easily. So without further delay let's come to the tutorial.

Many famous blog sites are hosted on Blogger and every blogger more or less starts their blogging journey from Google Blogger and then moves to any other blog. Blogger gives you the option to edit your Blogger blog theme to your liking. You just need to have some basic knowledge of HTML, CSS, and (JS) Javascript.

Why do you need to add code boxes to blogger posts?

When you write a blog post about Blogger Tutorial on your blog, you may share the code in the blog post with your readers. It is better to share those codes in separate code box or code snippet box so that they look stylish this is helpful for your visitors as they can easily copy the code from the code box. Sometimes the codes are not properly decorated look very bad and take up a lot of space in the blog post. So you need to add a method to copy code by clicking the copy button in the blogger post.

Follow the steps below to add a code box to a blog post.

How to add a code box with a copy button in a blogger post?

1. First, go to your blogger dashboard
2. Select Theme Options.
3. Next, select HTML Edit from the drop-down menu.
4. You will see an HTML code, click anywhere in the code box.
5. Now press Ctrl + F and search for the </body> tag.
6. Above/before the </body> tag, copy and paste the following code.

<style>
/* Codebox by Jirale.com */
.niadzgnBox{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}
.niadzgnBox .niadzgnBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.niadzgnBox .niadzgnBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.niadzgnBox .niadzgnBoxB{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}
.niadzgnBox .niadzgnBoxB:hover{opacity:.8}
.niadzgnBox .niadzgnBoxB .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}
.niadzgnBox .niadzgnBoxB.copied{background:#2dcda7}
.niadzgnBox .niadzgnBoxB.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>")}
.niadzgnBox 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}
.niadzgnBox pre::before, .niadzgnBox pre::after{content:''}
.darkMode .niadzgnBox{background:#2d2d30}
.darkMode .niadzgnBox pre{background:#252526;color:#fffdfc}
.niadzgnNtf 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){.niadzgnNtf 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 .niadzgnNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}</style>
<div id='niadzgnNotif' class='niadzgnNtf'></div>
<script>/*<![CDATA[*/ /* Codebox Script by Jirale.com */ 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("niadzgnNotif").innerHTML="<span>Copied To Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>

7. Now click on the "Save" theme and you are done!

How to use code box in blogger posts?

Follow the steps below to use the code box in your post.

1. Add a new post.
2. Select HTML View from the drop-down menu in the post editor.
3. Then, copy the code below and paste it where you want to add the code box.

<!--[ Code Box 1 ]-->
<div class='niadzgnBox'>
<div class='niadzgnBoxH'>
<span>HTML</span>
<button id='copy1' class='niadzgnBoxB' 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='niadzgnBox'>
<div class='niadzgnBoxH'>
<span>CSS</span>
<button id='copy2' class='niadzgnBoxB' 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='niadzgnBox'>
<div class='niadzgnBoxH'>
<span>JS</span>
<button id='copy3' class='niadzgnBoxB' 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.
5. Now click the Preview or Publish button to see it live.

Then you have successfully added a code box with a copy button to the blogger post.

How to display more than 3 code boxes in a blogger post?

If you want to display more than 3 code boxes in the same blogger post, just add the below code and change its values.

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

1. Replace the numbers in the code box with your desired number like 4, 5 or 6.
2. Your-Heading-Here Replace your heading here with CODE, HTML, CSS, JS (Javascript), Jquery, etc.
3. Replace all numbers with your desired code box numbers.

That's it.... all your work is done!

Conclusion :

Did you find this article helpful in adding a code box with a copy button to a blogger post? Definitely tell. If any problem related to this tutorial comment below and don't forget to share.

Go to Link

CONCLUSION

In this article, I shared with you Add Code Box in Blogger Post (Jirale.com). I hope you have liked It. Please do share it with your friends and follow our blog for more.

If you face any problems in Demo, Download or have any questions so feel free to ask me in comments section or join our Telegram Channel to get the lastest posts updates daily.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.