⫷ Master Tech Information Technology ⫸ ↲

How to put copy code or text button on blogger post? | ⫷【ALL ONLINE LIFE TECH】⫸

Sunday, July 19, 2020

How to put copy code or text button on blogger post?

how to add button in blogger post? Manually and with button methods-


The copy code button is placed on the website post so that any code can be easily copied. In which one method is manually selected and the other method is to click on the button. I am going to tell you both ways in this.

If you want to manually copy the code, the code has to be selected by mouse.
You can use the box to make the code stable.
The code for which is ...


<textarea> write your code or text</textarea>


The above code is for manual selection.

Now I am going to tell you the trick for the copy button.
To put a copy text button on the blogger post, coding is required, which has to be given in HTML coding of the post.
For this, it is necessary to have the latest version of the below jquery library code in your HTML coding.





You can search for this code in the edit HTML of Blogger template by ctrl + f. If there is an older version, change it to the latest version.

Now I will show you how to implement code for copy button step by step in post.
how to add button in blogger post image
Symple

Input copy code on blogger post  step by step Process -


Step 1 :
Simple step you can cut text from post edit section and give some symbol to Mark.
Now you need to go post edit to copy button code in HTML and search mark that you put in edit post. Then remove mark and paste below code to replace.


Code (A)

<p id="p1"><textarea>YOUR TEXT</textarea></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;">Button Name</button>

The above code is for p1 ie paragraph one.
If you have to give a second time code, then P2 has to be written.

After this, you have to give the below code in the footer.

Code (B)

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

___________________________________________________________________________________

Note: - This code is only for underline. Above Section is important.

Now the copy code button jquery has been added to your post.
You must give <hr> tag in the paragraph to give the underline.

For example: underline <hr>

Code A with Underline



<hr>
<p id="p1"><textarea>YOUR TEXT</textarea></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;">Button Name</button>
<hr>


Note: Code will be same for footer so put only one time. P1 and P2 will be changed as many codes are implemented.

No comments:

Post a Comment

Please do not enter any spam link in the comment box.

back to top