How to Add Copy Text Button in Blogger Post

Hello friends, in this article we will how you add a copy text button blogger.

Blogspot does not have an advanced feature like adding a button in the post or adding a special function button like copy text or highlight text in post or page.

In this article, we will a simple method to add a copy text button in blogger.

Step 1:

Adding a jQuery link in your template. But the first search for jQuery library link in your blogger template. there’s 99.9% chances that jQuery library link is present in your template.

You have to look for link starting with href=  ajax.googleapis.com

You can add a current version link from here. current version link is given below, and if you are going to add the latest link the link looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Link: https://developers.google.com/speed/libraries

Step 2:

Code for Step 2

<p id="p1">Your Text</p>

<button onclick="copyToClipboard('#p1')" style="border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
background-color: #4CAF50;">Copy TEXT</button>

Step 3:

Code for step3

<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>

Now Just save your post or page and see if your text is copied or not.

Code for Step 2 With Lines (Alternate Code):

<hr>

<p id="p1">Your Text</p>

<button onclick="copyToClipboard('#p1')" style="border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
background-color: #4CAF50;">Copy TEXT</button>

<hr>

Note: Remember if you are adding more than one copy text. then change if ID of the paragraph as shown in the video. Example:

Code for the second text

<p id="p2">Your Text</p>

<button onclick="copyToClipboard('#p2')" style="border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
background-color: #4CAF50;">Copy TEXT</button>