Copy to Clipboard box for Blogs- Model 1
For blogging sometimes we need to add some codes or program that need to copy from the blog. So we can create a copy to clipboard box to simplify or make attraction to the blog. For that just copy the below html/CSS content and paste in your blog in html view. And replace the 'sample text' with your content. You can refer the above image as example.
You can change the background colour, border radius, font etc by editing the below html/CSS code.
<style>
/* CSS for styling the code box */
.code-box {
background-color: #f1f1f1;
padding: 10px;
border-radius: 5px;
font-family: monospace;
}
</style>
<div class="code-box">
<pre id="code">sample text</pre>
<button id="copy-button" style="display: block; margin: 10px auto;">Copy to Clipboard</button>
</div>
<script>
// JavaScript for adding the "Copy to Clipboard" functionality
var copyButton = document.getElementById("copy-button");
copyButton.addEventListener("click", function() {
var code = document.getElementById("code").innerText;
navigator.clipboard.writeText(code).then(function() {
alert("Code copied to clipboard!");
}, function(err) {
console.error("Failed to copy code: ", err);
});
});
</script>