Text and Code Box With Click to Copy Button || Copy to Clipboard in Blogger 2023

If you want to put Copy to Clipboard in Blogger of your blog and website, then you have come to the right place, in this article you will know how to put Code Copy Clipboard in blogger, which will look absolutely premium copy button.

And there are many benefits of applying it, if you want to make your blogger website user friendly, then it has helped you a lot. You can give it to the court or get it copied. So let’s know how it is installed in blogger ( Copy to Clipboard in Blogger !)

How to Add Copy to Clipboard in Blogger?

So friends, now I am going to provide you some codes, which you have to go and paste in your blogger website, as you have said, you have to do exactly the same and if you have any problem in applying the codes, then you can also see the video below and put the codes in blogger. can put in

Step 1:- Go to the Blogger Dashboard.

Steps 2:-  Copy This JS Code and Paste it Above close Head Tag (</head)  in Blogger Theme file

<!-- click to copy js code / paste above </head> Tag --> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<script src='https://clipboardjs.com/dist/clipboard.min.js'/>

Steps 3:- Copy This script Code and Paste it Above close Body (</body>) Tag in Blogger Theme file.

<!-- click to copy js script code / Paste above </body> Tag -->
<script>
$(function() {
var clipboard = new ClipboardJS('.ClickToCopyButton'); 
$(".ClickToCopyButton").click(function() { 
$(this).html('Copied!!'); 
var that = $(this);
var intrvrl = setInterval(function(){ 
that.html('Click to Copy'); 
clearInterval(intrvrl); }, 
2000);
});
});
</script>

Steps 4:- Copy This CSS and Paste it in Blogger Theme file Go to: Blogger Dashboard -> Layout -> Theme Designer -> Advanced -> Add CSS

/*-------Click-to-copy-------*/

.copyarea {
display: flex;
position: relative;
width: 100%;
height: auto;
}


.copyarea textarea {
width: 100%;
box-sizing: border-box;
border: none;
padding-top: 34px;
padding-bottom: 34px;
padding-right: 11px;
padding-left: 11px;
background: #f5f6f7;
}


.copyarea textarea:focus-visible {
outline: -webkit-focus-ring-color auto 0px;
}


button.ClickToCopyButton {
width: 30%;
height: auto;
position: absolute;
top: 0;
right: 0;
border: none;
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
background: #0066ff;
}

button.ClickToCopyButton:hover {
background: #000;
}

@media screen and (max-width: 500px)
{button.ClickToCopyButton {
width: 100%;
}}

/*----xx------------Click-to-copy-------------xxxx---*/

Step 5:- Copy This Code and Paste it in Your Post You Must Give Unique Tag for Every Different Copy to Clipboard

<div class="copyarea">
<textarea width="100%" rows="11" id="Add-Unique-Tag">Add-Your-Text-or-Codes-Here</textarea>
<button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button>
</div>

(Optional)

Step 6:- If You keep gradient copy clipboard button so, CSS for Gradient Color on Copy to Click Button

background: #first-color; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #first-color, #second-color); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #first-color, #second-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

Step 7:- CSS For Hover Gradient Color on Copy to Click Button

background: #second-color; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #second-color, #first-color); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #second-color, #first-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

• How to Disable Right Click Option On Blogger
• Remove Date From Blogger Post URL – [Permanantly]
• How to remove blogger cookies notification?

So friends, I have provided you all the code by which you can put copy clipboard button in blogger and website, so if you have liked today’s article, then share this post with your friends as much as possible.