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

It's a 2 part process:

• The script part to find all the pre blocks having code in it and append a copy button to it dynamically.

• The style part to place our copy button at the specified location(on top right of every code block in this case)

The script part:

<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.rawgit.com/zenorocha/clipboard.js/v1.7.1/dist/clipboard.min.js"> 
</script>

Note:Before this version was 1.7.1 also as rawgit will shutdown in sometime above code will be replaced with:

<script src="https://cdn.jsdelivr.net/gh/zenorocha/clipboard.js@v1.7.1/dist/clipboard.min.js"> 
</script>

The style part (You might want to clean this part a bit,I will update it in free time):

<style>
.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;
}
</style>