Text Code Box With Click to Copy Button

HOW TO ADD TEXT CODE BOX WITH CLICK TO COPY BUTTON ON YOUR BLOGGER

🦶 1.  Procedures to follow when adding text and code box with click to copy button.

-Open this blog post, where am providing the required codes to apply.

-Copy the Js code.

-Now go to your blog dashboard and click on a theme.

-Click on the customize and on it click on edit HTML. HTML is found just after the customize.

-Now after that, the theme code will be open then click on it anywhere inside the theme.

-Now press control f (ctrl + f) and press enters key to get the search option.

-Now we want to find where the close head tag end, and by this, apply </head> on the search and press enter.

-You will see the close head tag

-Simply past the js code above the close tag.

-Click save

-Now go back to this post 

-Copy the script code

-Go back to theme HTML

-Do the same procedure and search 

- Type </body>

-Now paste the code above the body tag.

-Click on save

-Now go back to the post and copy the CSS code(3rd code)

-head over to the blog dashboard

-Click on the layout

-Click on theme designer

-Click on advanced

-Click Add CSS

-Past the code and save

-Go back to post and copy the fourth code

-Go to your post and open HTML view

- Past it on your post

-Now you the tag you can see add your text or code

-Simply replace with your choice code or text

-Change the unique code tag to any stage of your choice

-Make sure both stages are the same.

Now save and view your post 

1. Copy this js code and past it above the close Head Tag in the 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 past it above the close Body Tag in the 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 code and past it above the close Body Tag in Blogger theme file Go To: Blogger Dashboard=>Layour=>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%; }}

4. Copy this code and past it in your post
YOU MUST GIVE A UNIQUE FOR EVERY COPY TO CLIPBOARD

Remove the dollar sign fromt the following code and replace with less than bracke sign

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

5.CSS for gradient color on copy to 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+ */

6.CSS For Hover Gradient Colour on copy to 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+ */