Add Blogger Copy Clipboard Box with Click to Copy Button

In this article i'm going to show how to add Copy Text Clipboard to your Blogger Website. Clipboard box is very important for user's when you give a code or any other texts to user's for copy on your website so this is the easiest way to copy easily something from your website.

Steps For Blogger Website To Set Copy Clipboard Box

How to add text or code box with click to copy in your blogger website step by step full tutorial read this article full.

First of all copy below JS code now go to your blogger dashboard click on theme click on customize click on edit html.

Now simply click anywhere in the theme code now press (CTRL+F) on your keyboard now you can see the search box simply type </head>  press enter now you can see close head tag simply paste JS code above this close head tag click on save.

Step 1: Copy and Paste This Code Above The </head> Close Head Tag

<!-- 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'/>

Now copy this 2nd below JS script code head over to edit template page now we need to paste the JS script code above close body tag.

To find a close body tag simply click anywhere in the theme code now press (CTRL+F) on your keyboard now you can see search box simply type </body>  press enter now you can see close body tag simply paste JS script code above this close body tag click on save.

Step 2: Copy and Paste This Code Above The </body>

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

Now go back to the post copy this CSS Code head over to blogger dashboard click on layout click on theme designer click on advance now select add CSS from the drop down menu now paste the CSS code click on save.

Step 3: Copy and Paste This Code and Add it To 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---*/

Now go back to the post head over to this code now in this code you can see dollar sign ($) simply remove $ and add left pointing angle bracket < now copy this code now paste this code in the post where you want to add copy to clipboard.

Open the post go to html view now paste the code now in this code you can see this (Add-Your-Text-Code-Here) tag simply remove this and add your text or code which you want to place in clipboard.

Now we need to give a unique tag for this copy to clipboard to add a unique tag you can see this two tags options in this code (Your-Unique-Tag) and (#Your-Unique-Tag) text simply remove it and add your own unique tag for this copy to clipboard make sure these two tags are the same to work this clipboard.

Note: Wherever you create new different copy to clipboard you must use different unique tag. And don't use any space or capital latter in unique tag otherwise it's will not work you can use this  (-) in the place of space.

Change this rows number to increase or decrease clipboard height now update the post.

Step 4: Copy and Paste This Code in The Blog Post Where You Want To Add

Replace $ With pointing angle bracket <

<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-Your-Unique Tag">Click to Copy</button> </div>

Here you can see we successfully added copy to clipboard it's also responsive by device when we click on click to copy it will copy clipboard text and code.

Thank you for reading this article hope you will add your Blogger website Copy Text Box.