How to Add Copy Text Button in Blogger Website?

In this article, we will learn about how to add copy text button in blogger, how to add copy text button in wordpress, how to create copy text button in wordpress and how to create copy text button in blogger website etc.

Instructions for adding a Text and Code Box Blogger: Click to Copy Button | Copy to Clipboard

• Open the Blog Article to start. 
• Copy this Javascript code. 
• Go to your Blogger Dashboard.
  

 

• Choose Theme.
  

 

• Choose Customize. 
• Choose Edit HTML.
  

 

• Simply click anywhere in the theme code at this point. 
• Now, on your keyboard, hit CTRL + F.
  
• Now that the search box is visible.
• Just enter "</head>"

• Hit Enter. 
• You can now see the close head tag.
  

• Just add the Javascript code above this closing head tag.
<!-- 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'/>
• Select "Save." 
• Return to the original post immediately. 
• Copy the script code.
• Navigate to the template page to edit. 
• The JavaScript script code must now be pasted above the closing body element. 
• To locate a nearby body tag. 
• Click anywhere in the theme code by doing so. 
• Now, on your keyboard, hit Control F. 
• You can now view the search box. 
• Just enter "close body tag".
• Hit Enter. 
• You can now see the near body tag.

• Just insert the JavaScript script code above this closing body tag.
<!-- 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>
• Select "Save." 
• Return to the original post immediately. 
• Copy the CSS code. 
• Go to the Blogger Dashboard. 
• Choose layout.
• To select Theme Designer, click.

• Select Advanced.

• From the drop-down option, choose "ADD CSS" at this point.

• Paste the CSS code given below.
/*-------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---*/
• Choose Save. 
• Return to the original post immediately.
• Go to the HTML code page.
• Copy this code immediately given below. 
• Afterwards, put this code into the post where you wish to add copy to clipboard. 
• Click the post, 
• Choose HTML view like shown below in image.
  
• Paste the code now.
<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>
• Now, you can see this tag in this code.
• Simply delete this and then add the text or code that you want to copy to the clipboard. 
• At this point, we must assign a special tag to this copy to the clipboard.
• You can remove this text and add your own unique tag for this copy to the clipboard if you want to add a unique tag. 
• To use this clipboard, ensure that these two tags are same.
• Please take note that each time you make a new, separate copy to the clipboard, you must use a separate tag. 
• To change the clipboard height, alter the number of rows. 
• Update the post right away. 
• We were able to add copy to the clipboard. 
• It responds to different devices. 
• When we click on "click to copy," the clipboard's text and code are copied. 
• At this point, if you wish to change the copy button or this text area.
• After that simply navigate to your blogger dashboard. 
• Choose Theme. 
• Choose Customize. 
• Choose HTML edit. 
• Click anywhere in the theme code at this point. 
• Now, on your keyboard, hit Control F. 
• You can now view the search box.
• Just type. copyarea.
  
• Now that the text area and copy button have CSS. 
• If you want to modify the background color of the text area, modify this hex code. 
• Now, if you wish to change the color of the copy button, change this hex code.
• If you wish to modify the color of the copy button hover effect, change this hex code. 
• Click on save once you're finished. 
• Thus if you want to create a Gradient copy button. 
• Then return to the original post. 
• Select the CSS code. 
• Navigate to the template page to edit. 
• Look for the .copyarea tag.
  
• Click the dot-button Click the button to copy.
• In its place, insert the CSS gradient background tag. Now remove this background tag.  
• Start removing the first color tag and add your first color at this point. 
• Remove the tag for the second color and replace your own. 
• Click on save once you're finished. 
• We now need to modify the copy button's hover color. 
• Return to the original post for that. 
• Copy the CSS code.
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+ */
• Navigate to the template page to edit. 
• Click the button. 
• ClickToCopyButtonhover.
• To paste CSS for Gradient Color on Hover, remove this background tag.
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+ */
• Just add your second color after removing the second color tag. 
• Delete the tag for the first color and add your own. 
• Click on save once you're finished. 
• We were able to add a gradient-colored copy to clipboard button in Blogger. 
• Completed.

May You Like:- Blogger mein Table of Contents kaise add kare || How to remove ?m=1 in Blogger

You may also subscribe to our YouTube Channel - Pro Jaankari || To use SEO Tools visit our website - Incredible Tools Online

Frequently Asked Questions (FAQ)

• How do I add a Copy Button on Blogger?

Step 1: Log in to your blogger dashboard first using your login information.

Step 2: Select HTML View under New Post.

Step 3: Copy the code given in the post.

• What is Copy Tag in HTML?

When a user copies an element, for instance an image made using the <img> element, the oncopy property also triggers.The oncopy attribute is frequently applied to <input> components with the type="text" attribute.

• What is Link Copy Clipboard?

The possibility to copy the URL of a Library document, such as a Report Package, Report, Snapshot Report, Book, or a third-party file, is offered through the Copy URL to Clipboard function.The URL will either download the third-party file or open the item in a thin viewer.

• What is the difference between Copy and Copy to Clipboard?

The selected information is secured in temporary storage in both circumstances; the copy command makes a duplicate of the selected data, while the cut command removes the selected data from its original location (the clipboard).Anywhere a paste command is used, the data from the clipboard is thereafter inserted.