How To Add Code Box With Copy Button On Blogger Website
Do you share code on your website? Or your website is related to coding? Then it is the best idea to share the code using a code box. It will improve the visibility and the user experience of the visitors to your website. Also adding a copy button with the code is a good idea because it will also help you to improve the user experience.
In today's tutorial, I will share with you the way to add a code box along copy to the clipboard button. So read till the end!
What is a Code Box in a Website?
A code box, often referred to as a "code block" or "code snippet," is a design element on a website that is used to display and format sections of programming code. Code boxes are typically used to showcase examples of source code, whether it's HTML, CSS, JavaScript, Python, or any other programming language.
Here are some common characteristics of code boxes on websites:
- Syntax Highlighting: Code boxes often apply syntax highlighting, which color-codes different elements of the code to make it more readable and understandable. This can include highlighting keywords, strings, comments, and other syntax elements in distinct colors.
- Monospaced Font: Code is usually displayed in a monospaced or fixed-width font (e.g., Courier, Consolas) to ensure that characters align vertically, making the code easier to read and follow.
- Line Numbers: Some code boxes include line numbers to help users reference specific lines of code, especially when discussing or explaining code in tutorials or documentation.
- Copy Button: Many code boxes have a "Copy" button or icon that allows users to easily copy the code to their clipboard for use in their own projects.
- Scrolling: If the code within the box is lengthy, a code box may include scrolling functionality to allow users to view the entire code by scrolling vertically or horizontally.
- Expanding/Collapsing: In documentation or tutorials, code boxes may have an option to expand or collapse to show or hide the code, providing a cleaner reading experience.
- Responsive Design: Code boxes should be designed to be responsive so that they adapt to different screen sizes and devices, ensuring that the code remains readable on both desktop and mobile devices.
- Accessibility: Properly marked-up code boxes should be accessible to individuals with disabilities, including screen reader users, by providing alternative text and keyboard navigation options.
Code boxes are commonly used in technical documentation, programming tutorials, and developer-focused websites to present code examples and facilitate learning and understanding of coding concepts. They help keep the code well-organized and visually appealing, making it easier for users to interact with and learn from the code provided.
How to Add Code Box with Copy Button on Blogger?
We need to use HTML, CSS, and Javascript to create this code box for the blogger website. But here I will provide all the code. So, all you need to do is put them in the right place on your website. Now follow the below steps to add the code box to your website.
- Log in to your Blogger Dashboard.
- Now go to Theme > Customize > Edit HTML
- Now press Ctrl + F and search for
]]></b:skin>and paste the below code above]]></b:skin>code. - Now search for
<body>code and paste the following code below<body>code. If you can not find<body>then it is parsed<body>so paste the code under this code. - The last step is to paste the below JavaScript code above the
</body>code. If you can't find</body>then look for</body>and paste the code above it. - Finally, click the save icon to save the change in your template.
You may need to change the CSS code to match it with your template design. Also if your template has dark mode functionality then you need to change the class of dark mode to make it work in dark mode in your template.
/* Codebox */
.cBox{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}
.cBox .cBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.cBox .cBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.cBox .cBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#ff0033;transition:all .3s ease;-webkit-transition:all .3s ease}
.cBox .cBoxB:hover{opacity:.8}
.cBox .cBoxB .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}
.cBox .cBoxB.copied{background:#2dcda7}
.cBox .cBoxB.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>")}
.cBox pre{min-height:350px;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}
.cBox pre::before, .cBox pre::after{content:''}
.darkMode .cBox{background:#2d2d30}
.darkMode .cBox pre{background:#252526;color:#fffdfc}
/* Toast Notification */
.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)}
Plus UI template users replace .darkMode with .drK in the CSS code. Otherwise, this code box will not work in Dark Mode.
<!--[ Toast Notification ]--> <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>
It's done! The codebox functionality has been added to your website. Now wherever you want the code box to appear in your blog post, just go to HTML View and paste the below HTML code there.
<!--[ Code Box 1 ]-->
<div class='cBox'>
<div class='cBoxH'>
<!--[ Heading ]-->
<span>HTML</span>
<!--[ Copy Button ]-->
<button id='copy1' class='cBoxB' onclick="copyC('copy1','code1')">
<i class='icn'></i>
</button>
</div>
<!--[ Content ]-->
<div id='code1'>
<pre>Your_codes_here</pre>
</div>
</div>
If you want to use multiple code boxes in the same blog post then follow the code below.
<!--[ Code Box 1 ]-->
<div class='cBox'>
<div class='cBoxH'>
<!--[ Heading ]-->
<span>HTML</span>
<!--[ Copy Button ]-->
<button id='copy1' class='cBoxB' onclick="copyC('copy1','code1')">
<i class='icn'></i>
</button>
</div>
<!--[ Content ]-->
<div id='code1'>
<pre>Your_codes_here</pre>
</div>
</div>
<!--[ Code Box 2 ]-->
<div class='cBox'>
<div class='cBoxH'>
<!--[ Heading ]-->
<span>CSS</span>
<!--[ Copy Button ]-->
<button id='copy2' class='cBoxB' onclick="copyC('copy2','code2')">
<i class='icn'></i>
</button>
</div>
<!--[ Content ]-->
<div id='code2'>
<pre>Your_codes_here</pre>
</div>
</div>
<!--[ Code Box 3 ]-->
<div class='cBox'>
<div class='cBoxH'>
<!--[ Heading ]-->
<span>JS</span>
<!--[ Copy Button ]-->
<button id='copy3' class='cBoxB' onclick="copyC('copy3','code3')">
<i class='icn'></i>
</button>
</div>
<!--[ Content ]-->
<div id='code3'>
<pre>Your_codes_here</pre>
</div>
</div>
Notice carefully that I have changed the number for each code box. You have to do the same in order to work the code box perfectly. That's it!
