|
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.
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
Hope this compendium helps you. Happy blogging!
