How to Add Text or Code Box on blogger with a Copy to Clipboard button

How to Add Text or Code Box on blogger with a Copy to Clipboard button 

You may just follow the steps below

Step 1: Go to Dashboard, Theme, and Edit HTML button

Step 2: Copy this JS code and paste it above </head> tag

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

Step 3: Copy this JS code and paste it above  tag

<!-- code display starts --> <!-- 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> <!-- code display ends -->

Step 4: Copy this CSS code and paste it above ]]></b:skin< tag

<!-- code display starts --> /*-------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---*/ <!-- code display ends -->

Step 5: Now save the HTML edit page and open any post and where you want the Text or Code you want it to be appearing, copy the below code. Now you can write your text or code by replacing "Add-Your-Text-or-Codes-Here" ]]></b:skin> tag

<!-- code display starts --> <div class="copyarea"> <textarea width="100%" rows="11" id="AddUniqueTag">AddYourTextorCodesHere</textarea> <button class="ClickToCopyButton" data-clipboard-target="#AddUniqueTag">Click to Copy</button> </div> <!-- code display ends -->

Step 6: If you want your copy to clipboard button looks gradian like mine, replace background: #0066ff; within button.ClickToCopyButton with the below code

<!-- code display starts --> background: #fc00ff; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #fc00ff, #fc00ff); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #fc00ff, #fc00ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ <!-- code display ends -->

Step 7: And background: #000; within button.ClickToCopyButton:hover with the below code

<!-- code display starts --> background: #fc00ff; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #fc00ff, #fc00ff); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #fc00ff, #fc00ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ <!-- code display ends -->