Add a Code Box with Copy to Clipboard to Your Blogger Blog

by:Van Dewey Balao Published:
Python code.

Do you share a lot of code on your Blogger blog? If so, you might have noticed it's not always super easy for your readers to copy those code snippets. They have to highlight everything, right-click, and then copy. What if you could make it much simpler for them?

Well, if your Blogger blog doesn't have a neat code box with a "Copy to Clipboard" button, you're in the right place! Adding this feature is incredibly helpful for your readers. It lets them grab your code instantly with just one click, saving them time and making their experience much better.

I've actually used one of these plugins on my own Blogger site for a long time, and I absolutely love it. It's a game-changer for anyone who posts code regularly.

So, without further ado, let's get it installed on your blog right now!

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.

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.

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

I really hope this collection of tips proves useful for you. Now go forth and happy blogging!

Tags:

Van Dewey Balao

It's ok if you disagree with me. I can't force you to be right!

You might like

View all

I love hearing from you! To keep our conversations positive and respectful for everyone, comments are checked for decency before they're published. Please read my Comments Policy here.

Previous Post Next Post
Share to other apps
Copy Post Link