This article will show you how to easily embed the 'Copy' button in your Blogspot website. You might write some article or code snippet in your blog, and you want the reader to copy some of that using a simple copy button without much effort.
Advantages of this script :
- No coding skill required
- Compatible with all free(or premium) blogger themes available
- Pure HTML code, the script has no hidden tags or JAVA/JSON scripts
- Just copy and paste the code in your blog post
The interesting fact about this blog post is, this post itself used this same script.
So let us directly jump into business!
Step 1: Log into your blogger.com control panel, create a new post and go to HTML view.
Step2: Copy this code given at the end of this post. Now there are two ways you can copy it.
a) You can drag your mouse over the code section, right click and copy the code(no need to modify anything)
b) Click on the 'Copy the Code' button(for this case you need to slightly modify the code before pasting it in your blog post)
For Step2: (a)
- Copy below code , starting from <textarea to <br />
- Whatever code or text you want readers to copy-paste that in place of {----This code/text will be inside copy box----}
<textarea cols="100" id="htmlText" readonly="" rows="20" style="background-color: #1b1b1b; color: white; height: auto; overflow: auto; resize: none; width: 100%;">{----This code/text will be inside copy box----}</textarea><button id="htmlBtn" onclick="copyhtml()" style="background-color: #4caf50; border: none; color: white; cursor: pointer; display: inline-block; font-size: 16px; margin: 4px 2px; padding: 10px 30px; text-align: center; text-decoration: none;">Copy the Code</button><script>function copyhtml() {const text = document.querySelector("#htmlText");const btnText = document.querySelector("#htmlBtn");text.select();document.execCommand("copy");btnText.textContent = "Code Copied Successfully";setTimeout(function(){btnText.textContent = "Copy the Code";}, 5000);}</script><br /><br />
For Step2: (b)
- Click on the 'Copy the Code' button
- Once the code is copied into the clipboard, paste that to any HTML editor, say, Notepad ++ or blogger HTML view itself.
- Now find first <//textarea and replace that with <textarea that means just remove those two // symbols.
- Find second <//textarea and replace that with </textarea that means remove one / symbol
- Find <//button and replace that with <button that means just remove those two // symbols.
- Now find first <//script and replace that with <script that means just remove those two // symbols.
- Find second <//script and replace that with </script that means remove one / symbol
- Finally find <br //><br //> and replace that with <br /><br /> that means remove one / symbol from each angular bracket< >
You should follow only one method, i.e. either Step2: (a) or Step2: (b). Do not follow both the steps.
Please comment if you are still facing any issue using this script on your blogger.com website, we will help you resolve that.
