Copy to Clipboard in Blogger

Copy This JS Code and Paste it Above close Head Tag in Blogger Theme file

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/> <script src='https://clipboardjs.com/dist/clipboard.min.js'/>

Copy This script Code and Paste it Above close Body Tag in Blogger Theme file

<script> $(function() { var clipboard = new ClipboardJS('.ClickToCopyButton'); $(".ClickToCopyButton").click(function() { $(this).html('Copied!!'); var that = $(this); var intrvrl = setInterval(function(){ that.html('Click to Copy'); clearInterval(intrvrl); }, 2000); }); }); </script>

Copy This CSS and Paste it in Blogger Theme file Go to: Blogger Dashboard -> Layout -> Theme Designer -> Advanced -> Add CSS

/*-------Click-to-copy-------*/ .copyarea { display: flex; position: relative; width: 100%; height: auto; } .copyarea textarea { width: 100%; box-sizing: border-box; border: none; padding-top: 34px; padding-bottom: 34px; padding-right: 11px; padding-left: 11px; background: #f5f6f7; } .copyarea textarea:focus-visible { outline: -webkit-focus-ring-color auto 0px; } button.ClickToCopyButton { width: 30%; height: auto; position: absolute; top: 0; right: 0; border: none; padding-top: 5px; padding-bottom: 5px; color: #fff; background: #0066ff; } button.ClickToCopyButton:hover { background: #000; } @media screen and (max-width: 500px) {button.ClickToCopyButton { width: 100%; }} /*----xx------------Click-to-copy-------------xxxx---*/

Copy This Code and Paste it in Your Post You Must Give Unique Tag for Every Different Copy to Clipboard Remove $ sign from Following code and Add (Left-Pointing Angle Bracket Symbol)

<div class="copyarea"> <textarea id="Add-Unique-Tags" rows="6" width="100%">Add-Text-or-Codes$/textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tags">Click to Copy</button> </div>

CSS for Gradient Color on Copy to Click Button

background: #first-color; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #first-color, #second-color); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #first-color, #second-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

CSS For Hover Gradient Color on Copy to Click Button

background: #second-color; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #second-color, #first-color); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #second-color, #first-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */