If you regularly share HTML, CSS, JavaScript, or other code snippets on your Blogger blog, adding a "Copy to Clipboard" button can make things much easier for your readers.
Instead of manually highlighting the entire code block and copying it themselves, visitors can simply click a button to instantly copy the code. It improves usability and creates a cleaner experience, especially for tutorials and technical articles.
I’ve personally used this type of feature on my own Blogger site for a long time, and it makes sharing code much more convenient.
Below are several different methods you can use to add a copy-to-clipboard function to your Blogger code boxes.
Main Copy-to-Clipboard Method
1. Log in to your Blogger account.
2. Go to Theme.
3. Under My Theme, click the dropdown menu and select Edit HTML.
4. If your Blogger template does not already use Font Awesome, add the code below above the closing </head> tag.
<link href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' rel='stylesheet' type='text/css'/>5. If your Blogger template does not already load jQuery, add the script below above the closing </head> tag.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>6. Next, add ClipboardJS before the closing </head> tag directly below the jQuery script.
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js'></script>7. Search for ]]></b:skin> and paste the CSS below directly above it.
#clpmsg,#clpmsg::before,.clpbrd{position:absolute}pre{position:relative;border-color:#f5f5f5;border-style:solid;border-width:1px 1px 1px 0;padding:10px;border-left:solid 10px $(main.color);font-size:15px;max-height:500px;overflow-y:scroll;white-space:pre-wrap}.clpbrd{background:#fff;border:1px solid #d5d5d5;padding:2px;border-radius:3px;width:25px;height:25px;cursor:pointer;top:3px;right:3px;-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;opacity:0}pre .clpbrd:hover #clpmsg,pre:hover .clpbrd{opacity:1}pre .clpbrd:active,pre .clpbrd:hover{background-color:#ddd;background-image:none;border-color:#b5b5b5;transition:.3s;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}pre .clpbrd:focus{text-decoration:none;border-color:#51a7e8;outline:0;box-shadow:0 0 5px rgba(81,167,232,.5)}#clpmsg{background-color:#000;color:#fff;padding:3px 5px;border-radius:3px;word-break:initial;height:17px;top:-1px;right:31px;opacity:0;-webkit-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out}#clpmsg::before{content:"";border:10px solid;top:2px;border-color:transparent transparent transparent #000;right:0;margin-right:-15px;width:0;height:0}8. Search for </body> and paste the script below directly above it.
<script type='text/javascript'>function showTooltip(elem){$("<span id='clpmsg'>Copied</span>").prependTo(elem),$(elem).children().first().delay(1e3).fadeOut(1e3,function(){$(this).remove()})}$("<button class='clpbrd' data-clipboard-action='copy' data-clipboard-target='pre code'><i class='far fa-clone'></i></button>").insertBefore("pre code");var clipboard=new ClipboardJS(".clpbrd",{target:function(trigger){return trigger.nextElementSibling}});clipboard.on("success",function(e){e.clearSelection(),showTooltip(e.trigger)});var TopOffset=parseInt($(".clpbrd").css("top"));$("pre").scroll(function(){$(".clpbrd").css({top:$(this).scrollTop()+TopOffset})});</script>9. Save your Blogger theme.
10. To display a code box with a copy button inside posts, use the sample structure below:
<pre><code>Put your code here </code></pre>Alternative #1
This method uses a simpler copy button implementation with ClipboardJS.
1. Add the following scripts before the closing </head> tag.
<link href = '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel = 'stylesheet' type = 'text / css' />
< script src = '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type = 'text / javascript' />2. Add the following ClipboardJS code.
< script src = '//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js' type = 'text / javascript' /> < script type = 'text / javascript' >
// <! [CDATA [
$ (function () {new Clipboard (". copyTextButton")});
//]]> </ script >3. Paste the CSS below above ]]></b:skin>.
.codeToClipboardHeader { background-color : #fff ; border : 1px solid # e0e0e0 ; border-bottom : 0 ; text-align : left; padding : 3px }
.copyTextButton { color : # 000 ! important ; font-size : 18px ; padding : 4px 10px ; border-right : 1px solid # e0e0e0 ; text-decoration : none}
.copyTextButton : before { margin : 0 5px 0 0 ; font-size : 16px ; content : '\ f0c5' ; font-family : fontawesome}
pre .codeToClipboard { background : #fff ; max-height : 500px ; font-size : 14px ; Color : # 000 ; overflow : auto; border : 1px solid # d3d6db ; margin : auto;padding : 10px 8px }4. Use the sample structure below when creating code boxes.
<div class = "codeToClipboardHeader" > <a class = "copyTextButton" data-clipboard-target= "#content1" href= "#null" title= "Copy to clipboard"> Copy </a> </div>
<pre class = "codeToClipboard" id = "content1" >
Put your code here
</pre>Alternative #2
This version combines ClipboardJS with Highlight.js syntax highlighting.
It supports language-specific code formatting and includes tooltip notifications after copying.
The original CSS, JavaScript, and HTML implementation remain unchanged from the original tutorial.
Alternative #3
This method works together with Google Code Prettify.
1. Add the below prettify code before closing </body> tag
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=sunburst"></script>Whenever you post your article that has codes you have to wrap your codes using the below
<code class="prettyprint">Put your code here</code><pre class="prettyprint linenums">Put your code here</pre>Add this line of code to prevent long lines from overflowing in your blog:
<style type="text/css">
pre.prettyprint {
overflow-x: auto;
}</style>After installing prettify pre blocks, integrate the following codes.
2. Add the below script before closing </body> tag.
<script>
var pre = document.getElementsByTagName('pre');
for (var i = 0; i < pre.length; i++) {
var button = document.createElement('button');
button.className = 'copy-button';
button.textContent = 'Copy';
var s = pre[i].innerText;
button.setAttribute("data-clipboard-text",s);
pre[i].appendChild(button);
}
var clipboard = new Clipboard('.copy-button');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.trigger.textContent = 'Copied';
window.setTimeout(function() {
e.trigger.textContent = 'Copy';
}, 2000);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
<script src="https://cdn.jsdelivr.net/gh/zenorocha/clipboard.js@v1.7.1/dist/clipboard.min.js">
</script>
</script>3. Copy and paste the below CSS code before ]]></b:skin>. Don't forget to change the YourWebsiteName in the code.
.copy-button {
cursor: pointer;
border: 0;
font-size: 10px;
text-transform: uppercase;
font-weight: 500;
padding: 6px 10px 10px;
color: #795548;
background-color: transparent;
position: absolute;
top: 0;
right: 0;
}
.copy-button, ::before, ::after {
box-sizing: inherit;
}
.copy-button {
font-family: 'HELEVETICA',sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
text-indent: 0;
}
pre[class*="prettyprint"] {
-moz-tab-size: 4;
-moz-hyphens: none;
hyphens: none;
}
.copy-button::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
.copy-button::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-right: 3px;
background-size: contain;
background-image: url('http://www.YourWebsiteName.com/favicon.ico');
background-repeat: no-repeat;
position: relative;
top: 3px;
}
.copy-button {
cursor: pointer;
border: 0;
font-size: 10px;
text-transform: uppercase;
font-weight: 500;
padding: 6px 10px 10px;
color: #795548;
background-color: transparent;
position: absolute;
top: 0;
right: 0;
}
pre[class*="prettyprint"] {
-moz-tab-size: 4;
-moz-hyphens: none;
hyphens: none;
position: relative;}
.copy-button{border-radius: 0;
min-width:55px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #bbb;
color: #26589F;
font-family: 'HELEVETICA',sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 1.42rem;
margin: 0;
padding: 0px 5px;
text-align: center;
text-decoration: none;
text-indent: 0;
position:absolute;
background:#ccc;
}
.pre{max-width: 30px;
overflow: hidden;
position: absolute;}
ol.linenums {
overflow: auto;
}Final Thoughts
Adding a copy-to-clipboard button to your Blogger code boxes can significantly improve the experience for readers who regularly copy code from your tutorials.
Whether you prefer a lightweight clipboard button or a more advanced setup with syntax highlighting and tooltips, these methods give you several options depending on your Blogger template and coding style.
Hopefully, this guide helps you create cleaner and more user-friendly code boxes on your Blogger blog.
- Hung 1001. (2018, May). [Blogger] Creates a code container with a copy to clipboard button for Blogspot [Blog post]. Retrieved from https://www.hung1001.com/2017/11/tao-khung-chua-code-co-nut-copy-to-clipboard-cho-blogspot.html
- Hung 1001. (2018, July). ClipboardJs with tooltip and highlight js [Blog post]. Retrieved from https://www.hung1001.com/2018/07/clipboardjs-with-tooltip-and-highlight-js.html
- Kumar. (2017, August 28). Adding code prettify to blogger [Blog post]. Retrieved from https://www.tcbin.com/2017/08/adding-code-prettifier-to-blogger.html
- Kumar, S. (2017, December 16). Adding copy to clipboard button to every google code prettify pre blocks in blogger [Blog post]. Retrieved from https://www.tcbin.com/2017/12/copy-clipboard-button-code-prettify-google.html
