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>
[Download] Game Of Thrones Season 08 Episode 06 (final episode) |...