With the help of a code box, you can easily embed code snippets into your blog post. This is a great way to add custom functionality to your website without having to learn how to code.
Add a Code Box with Copy Button
The following steps will show you how to add a code box with a copy button on Blogger:
1) log in to Blogger and go to Layout.
2) Click on Edit HTML, then scroll down until you see the section where it says.
3) Add the following codes:
A code box is a container that contains a set of codes. It can be used to show the code of an HTML element on a web page, or it can be used to show the code of an entire web page. The most common use is for showing the HTML code for a given webpage.
Adding a Code Box with Copy Button to Your Blogger Website
How to Add Code box with a copy to Clipboard button in Blogger?
Step 1:- Open Your Blogger and then click on Theme and then click on Edit HTML.
Step 2:- Copy the JAVA & CSS Code Given Below and Paste it Just Above the Closing </Body> Tag,
Step 3:- Now, Copy the HTML Code and Paste it there Where You Want to Show the Code Box.
Step 4:- Enter Your Code inside the <pre> </pre> Tag or Replace you Code with line This is a simple HTML code and Switch to Compose View and Remove <p> </p>.
Step 5:- If you are using HTML or Javascript code then have to parse the code before adding it to the Code Box, otherwise, the code box will not show it properly.
So, First Use the Free HTML parse tool.
To Use Free HTML parse tool Click on Free HTML parse tool.
If you are using HTML or Javascript code then You have to parse the code before adding it to the Code Box, otherwise, the code box will not show it properly. So, First Use the Free HTML parse tool.
<!--[ Code Box 1 ]-->
<div class='K2_CBox'>
<div class='CB_Heading'>
<span>HTML</span>
<button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')">
<i class='CBox_icn'></i>
</button>
</div>
<!--Add Your Parse HTML code Here-->
<div id='code1'>
<pre><p>This is a simple HTML code </p></pre>
</div>
</div>
<style>
.K2_CBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;padding:10px;margin:30px 0 30px}
.K2_CBox .CB_Heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.K2_CBox .CB_Heading span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.K2_CBox .C_box_main{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#004cbd;transition:all .3s ease;-webkit-transition:all .3s ease}.K2_CBox .C_box_main:hover{opacity:.8}.K2_CBox .C_box_main .CBox_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}
.K2_CBox .C_box_main.copied{background:#2dcda7}
.K2_CBox .C_box_main.copied .CBox_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>")}
.K2_CBox pre{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; white-space: pre-wrap;}
.K2_CBox pre::before, .K2_CBox pre::after{content:''}
.dark-Mode .K2_CBox{background:#2d2d30}.dark-Mode .K2_CBox pre{background:#252526;color:#fffdfc}
.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)}
</style>
<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>
The code box with
a copy to clipboard button does not work in Blogger. The only way to
get the code is to copy and paste it.
To add a code box
with a copy to clipboard button, follow these steps:
1) Copy the code
from the website you want to share
2) Paste the
copied code into your Blogger post
3) Add a div
container around the copied code and add an "on click" event
handler on it. This event handler will trigger when you click on the
div container
4) Add this line
of JavaScript: "document.execCommand('copy')"
This article will
show you how to add a code box with a copy to the clipboard button in
Blogger.
Step 1:
Log into your
Blogger account, go to the Design tab on the left-hand side and then
click on Edit HTML. For those who are not familiar with HTML, this is
where you can edit the content of your blog post.
Step 2:
Scroll down until
you find the section where you want to add the code box with a copy
to the clipboard button. This is usually at the bottom of your blog post.
Step 3:
Copy and paste
this code into this section:
The blog editor in
Blogger is a WYSIWYG editor. This means that you can use the buttons
on the toolbar to format text, add images and other media, and more.
In this tutorial,
we will show you how to add a code box with a copy to the clipboard
button in Blogger.
Follow these
steps:
1) Open your blog
post in Blogger 2) Click on the "insert" tab at the top of
your screen 3) Select "text" 4) Click on "Text Box"
5) Type your text into the box 6) Click on "insert/edit link"
7) Select "clipboard" 8) Type your text into the URL field
9) Press enter 10.) Save changes
Conclusion
This tutorial will show you how to add a code box with a copy button to your Blogger website.
Step 1: Go to the blog or post where you want the code box to appear.
Step 2: Click on the "Edit HTML" button in the top menu bar.
Step 3: Paste this code into your blog post's HTML editor window, replacing anything that is already there.
A blog is a great way to express your thoughts and opinions to the world. But what if you want to share more than just your thoughts? What if you want to share some code snippets or code snippets with explanations?
That's where the Code box with the copy button comes in. This article will show you how to add a Code box with a copy button on your Blogger site.
