Click To Copy To Clipboard With Custom Alert Using Javascript on Blogger

In this article, I will show you how you can add a click to copy to clipboard with custom alert on blogger.

Steps to Follow:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </body>.
   
   

   To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Now copy the code provided below and paste it after </body>, tag.
   

   <style>code, pre, mark{-webkit-user-select:all !important;-khtml-user-select:all !important;-moz-user-select:all !important;-ms-user-select:all !important;user-select:all !important}
   </style><script>//<![CDATA[
   jQuery.fn.selectText=function(){this.find('input').each(function(){if($(this).prev().length==0||!$(this).prev().hasClass('p_copy')){$('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this))}
   $(this).prev().html($(this).val())});var doc=document;var element=this[0];console.log(this,element);if(doc.body.createTextRange){var range=document.body.createTextRange();range.moveToElementText(element);range.select();document.execCommand('copy')}else if(window.getSelection){var selection=window.getSelection();var range=document.createRange();range.selectNodeContents(element);selection.removeAllRanges();selection.addRange(range);document.execCommand('copy')}}
   $('pre, code, mark').on('click', function(e) {
   var selector = $(this);
   $(selector).selectText();
   e.preventDefault();
   alert("Your Text is successfully copied to clipboard");
   });//]]></script>

6. Save Theme/Template

You can replace or add more elements by changing the selector value in the above code. Selectors are highlighted.

You can also use multiple selectors as I have used in the above code.

How to use:

To add click to copy on your blog post you need to use this code

1. <mark>Sayem Tutorial</mark>
2. <pre>Sayem Tutorial</Pre>
3. <code>Sayem Tutorial</code>
4. <pre><code>Sayem Tutorial</code></pre>

Note: Add Your content On Sayem Tutorial which you want to copy

Conclusion:

So now you have effectively included this usefulness into your blogger blog you can likewise utilize a similar code in your WordPress site now you can undoubtedly choose and duplicate content to clipboard utilizing jQuery with onclick occasion. 

I trust you will like this article and kindly offer this article with your companions who are modifying sweethearts. 

On the off chance that you need any assistance please leave your remarks in the remark segment this remark area is for your remarks as it were. Also, kindly fill the remark segment with your exquisite remarks that don't leave it clear. Presently HANG OUT!

Some Credit Of This Post: SoftWebTuts & SM Design