Text Code Box With Click to Copy Button

|Adding Copy to Clipboard Functionality to Your Blogger

Introduction:

In the tapestry of digital creation, every blogger seeks to weave a seamless experience for their audience, a journey where words and code intertwine in a dance of inspiration and innovation. Today, we embark on a quest to enhance our blogs with a touch of magic, a feature that allows readers to effortlessly capture snippets of wisdom and code with a simple click. Join me as we delve into the enchanting realm of adding copy to clipboard functionality to our Blogger platform, turning our virtual abodes into sanctuaries of creativity and convenience.

Preparing for the Journey Of text box with copy Button:

Before we embark on this wondrous voyage, let us gather our tools and prepare the canvas for our masterpiece. As we open our blog post, we are greeted by the promise of transformation, a link nestled within the eo description, awaiting its moment to shine. With a graceful flourish, we copy the JavaScript code provided, a symphony of commands poised to breathe life into our digital domain.

Here is the Process of Adding Copy to Clipboard Functionality to Your Blogger

1. Copy This below JS Code and Paste it Above close Head Tag ( </head> ) in your 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 below script Code and Paste it Above close Body Tag ( </body> ) in your  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 below CSS code and Paste it in your 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 below  Code and Paste it in Your Post You Must Give Unique Tag ( id="Addunique-id-tag" ) for Every Different Copy to Clipboard and dont remove the # from this id ( target="#Add-Unique-Tag"> )
Remove $ sign from Following code (  $/textarea> )  and Add (  </textarea> )

 

<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>