Copy to Clipboard box for Blogs
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 'Paste Your Content here' with your content. You can refer the below copy to box as example.
Paste Your Content here
You can change the background colour, border radius, font etc by editing the below html/CSS code.
<pre class="prettyprint">
<code class="language-html">
Paste Your Content here
</code>
</pre>
<style>
pre.prettyprint {
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
font-size: 14px;
font-family: 'Courier New', Courier, monospace;
position: relative;
}
pre.prettyprint .copy-button {
position: absolute;
top: 5px;
right: 5px;
padding: 5px;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
pre.prettyprint .copy-button:hover {
background-color: #666;
}
</style>
<script>
function copyCode() {
var code = document.querySelector('pre.prettyprint code');
var range = document.createRange();
range.selectNode(code);
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
var button = document.querySelector('pre.prettyprint .copy-button');
button.textContent = 'Copied!';
setTimeout(function() {
button.textContent = 'Copy';
}, 2000);
}
var buttons = document.querySelectorAll('pre.prettyprint');
for (var i = 0; i < buttons.length; i++) {
var button = document.createElement('div');
button.className = 'copy-button';
button.textContent = 'Copy';
button.addEventListener('click', copyCode);
buttons[i].appendChild(button);
}
</script>