How To Add Copy Text Box On Blogger - UNPLUG.DOC

In this article, I will show you how you can create a clipboard button copy using HTML, CSS and Javascript and add it to your Blogger and WordPress website.

In This Blog Artical Know How To Copy to Clipboard button helps you to copy an entire paragraph with one click and gives users a better website experience.

You can add this button to any of the HTML elements like a paragraph, blockquote, div, code box, etc. You just need to add the id in the HTML element and add the Js code for the copy function to work.

So if you are providing any kind of script or quotes, Shayari on your website then this tutorial will be very helpful for you.

Users will be able to copy text to clipboard with a click of a button.

So if you are a visual learner you can watch this video and all required codes for this will be provided below.

Here, I have explained how to use this copy to clipboard button in Blogger.

This post will guide you to add "Copy" button to html element. It will work for all kinds of frontend frameworks (including SSR and JAM-stack); The core idea will be the same, but the implementation may differ between frameworks.

ADD ON BLOGGER :

1. Copy The HTML CODE And Paste Into Your Blogger Post Page Html View And Paste The Code 
2. Done
3. Remove All The Code Box CSS Javascripts And Jquery 

HTML CODE

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js"></script>
<center><div style="text-align: left;"><span style="font-family: arial; font-size: small;">Hover and click copy</span></div></center>
<h2 style="text-align: left;">HTML CODE</h2>
<pre><code>ENTER YOUR CODE 01</code></pre>

<h2>CSS CODE</h2>
<pre><code>ENTER YOUR CODE 02</code></pre>

<h2>JAVASCRIPT</h2>
<pre><code>ENTER YOUR CODE 03</code></pre>

<style>
#clpmsg,
#clpmsg::before,
.clpbrd {
    position: absolute
}

pre {
    position: relative;
    border-color: #000000;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    padding: 10px;
    border-left: solid 5px #d30606;
    font-size: 15px;
    max-height: 500px;
    overflow-y: scroll;
    white-space: pre-wrap
}

.clpbrd {
    background: #000000;
    border: 1px solid #d30606;
    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: #d30606;
    transition: .3s;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15)
}

pre .clpbrd:focus {
    text-decoration: none;
    border-color: #d30606;
    outline: 0;
    box-shadow: 0 0 5px rgba(81, 167, 232, .5)
}

#clpmsg {
    background-color: #d30606;
    color: #191919;
    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
}</style>
<script>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>

This Blogger Website Is Provide You Blogger Template Documentation And Widget And Theme Editting Documentation So Subscribe And Follow For Up To Date With New Post