How to Install Code Box with Copy to Clipboard Button on Blogger

Python code.

Is your Blogger blog doesn't have a code box with a copy to clipboard button function? Here's how to install it. This is ideal for you if you post a lot of code in your Blogger blog so your followers can easily copy the codes and help them save time. I used one of these Blogger plugins for a long time and I really love it.

Without further ado, let's install it now.

Simple code box with clipboard button

1. Log in to your Blogger blog.

2. Go to your blog Theme.

3. Under My Theme click the drop-down button and click on Edit HTML

4. If your blog doesn't have fontawesome yet, insert the below code above closing </head> tag.

<link href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' rel='stylesheet' type='text/css'/>

5. If your blog doesn't have JQuery yet, insert the below code above closing </head> tag.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

6. Next, integrate copy to clipboard function by inserting the following code before the closing </head> tag just right below the JQuery.

<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js'></script>

7. Now search for ]]></b:skin> and paste the following CSS code 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. Next search for </body> and paste the below script 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. Congratulations you finally installed the plugin.

Here's a sample when writing articles so the code box and clipboard will show.

<pre><code>
Put your code here
</code></pre>

Other Alternatives you can try:

Alternative #1.

code container with a copy to clipboard button

1. Put the below codes 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 below codes before the closing </head> tag.

 < 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. Search for ]]></b:skin> and paste the following CSS code above it.

.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. Here's a sample when writing articles so the code box and clipboard will show.

<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>

Source: [Blogger] Creates a code container with a copy to clipboard button for Blogspot

Alternative #2.

ClipboardJS with Tooltip And Highlight JS

1. Add the below codes above closing </head> tag. If JQuery and fontawesome are already integrated do not add it only the highlight.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"> 
<link href='https://use.fontawesome.com/releases/v5.1.0/css/all.css' rel='stylesheet' type='text/css' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night-bright.min.css' rel='stylesheet' type='text/css'/>

2. Search for ]]></b:skin> and paste the following CSS code above it.

.codeHeader{position:absolute;text-align:right;top:-5px;right:0}
.copy-text{font-size:14px;cursor:pointer;color:#fff;padding:8px 10px;background:#000;border:1px solid #666;border-radius:100%}
.copy-text:before{font-family:"font awesome 5 free";content:"\f24d";display:inline-block;font-size:13px}
.copy-text:hover{color:#fff;background:#333}
pre{padding-right:15px;position:relative}
pre code{display:block;max-height:400px;font-size:14px;color:black;text-align:left;overflow:auto;border:0;margin:auto;padding:16px;line-height:21px}
.tooltip{position:absolute;z-index:1030;display:block;font-size:12px;line-height:1.4;opacity:0;filter:alpha(opacity=0);visibility:visible}
.tooltip.in{opacity:.9;filter:alpha(opacity=90)}
.tooltip.top{padding:5px 0;margin-top:-3px}
.tooltip.right{padding:0 5px;margin-left:3px}
.tooltip.bottom{padding:5px 0;margin-top:3px}
.tooltip.left{padding:0 5px;margin-left:-3px}
.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;border-radius:4px}
.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}
.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-color:#000;border-width:5px 5px 0}
.tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-top-color:#000;border-width:5px 5px 0}
.tooltip.top-right .tooltip-arrow{right:5px;bottom:0;border-top-color:#000;border-width:5px 5px 0}
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-right-color:#000;border-width:5px 5px 5px 0}
.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-left-color:#000;border-width:5px 0 5px 5px}
.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:#000;border-width:0 5px 5px}
.tooltip.bottom-left .tooltip-arrow{top:0;left:5px;border-bottom-color:#000;border-width:0 5px 5px}
.tooltip.bottom-right .tooltip-arrow{top:0;right:5px;border-bottom-color:#000;border-width:0 5px 5px}

3. Search for </body> and paste the below script above it

<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/components/bootstrap/3/js/tooltip.js' type='text/javascript'/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    $("pre code").before("
"); $('.copy-text').tooltip({ trigger: 'click' }) $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); }); var clipboard = new ClipboardJS(".copy-text", { target: function(trigger) { return trigger.parentNode.nextElementSibling } }); function setTooltip(btn, message) { $(btn).tooltip('hide').attr('data-original-title', message).tooltip('show'); } function hideTooltip(btn) { setTimeout(function() { $(btn).tooltip('hide'); }, 500); } clipboard.on('success', function(e) { e.clearSelection(); // if you want to clear the Selection var btn = $(e.trigger); setTooltip(btn, 'Copied'); hideTooltip(btn); }); clipboard.on('error', function(e) { var btn = $(e.trigger); setTooltip('Failed'); hideTooltip(btn); }); //]]></script>

You're done!

Here's a sample when writing articles so the code box and clipboard will show.

<pre><code class="xxx">
Put your code here
</code></pre>

XXX above is the language you want to display, get a list here. Do not want to beautify a certain use frame? Then use the below:

<pre><code class="nohighlight">
Put your code here
</code></pre>

Source: ClipboardJS with Tooltip And Highlight JS

Alternative #3.

To make this work you need to add prettify to Blogger first.

1. Add the below prettify code before closing </body> tag

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>

Whenever you post your article that has codes you have to wrap your codes using the below

<pre class="prettyprint linenums">Put your code here</pre>

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;
}

Source: Adding copy to clipboard button to every google code prettify pre blocks in blogger

Hope this compendium helps you. Happy blogging!

Your voice matters. Discussions are moderated for civility before being published on the blog. Read my comment policy here.

Previous Post Next Post