How To Add Click To Copy Button UI In Blogger - itshehzada

Step 1 Goto Blogger And Sign-in
Step 2 Click Theme Option And Click Right Side Arrow Button then click back-up Option Then Click download

Step 3 Goto Theme And Click Right Side Arrow Button And Go To Edit HTML

Step 4 Search Close < /Head> tag Then Paste Code Above < /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'/>

Step 5 Search Close < /body> tag then paste Code Above < /body> Tag

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

Step 6 Goto Theme And Click Customize option Then Click Advanced Option Then Scroll And Click ADD CSS Then Paste Code 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; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; } .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: linear-gradient(to left, black, red); } button.ClickToCopyButton:hover { Background: linear-gradient(to left, black, green); } @media screen and (max-width: 500px) {button.ClickToCopyButton { width: 100%; }} /*----xx------------Click-to-copy-------------xxxx---*/