Box Code Blogger Post with Copy Button | Box Code with clipboard

1. Copy This JS Code and Paste it Above close Head Tag </head> 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 </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 <

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

Rate This Article

Go to Link

Thank You So Much Box Code Blogger Post with Copy Button | Box Code with clipboard For Reading This Article.