Text Code Box With Click to Copy Button - Copy to Clipboard in Blogger

- click on theme.

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

<!-- click to copy js code / paste above </head> Tag --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/> <script src='https://clipboardjs.com/dist/clipboard.min.js'/>

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

<!-- click to copy js script code / Paste above </body> Tag --> <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>

3. 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---*/

4. 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 width="100%" rows="11" id="Add-Unique-Tag">Add-Your-Text-or-Codes-Here