Home
Feature
Script

How to Add Copied Notification Feature in your Website

Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Copied Notification Script on blogger. This is the Right Place to you. Since You can get this Script for free.

Today, in this article, I will Discuss with you about How to Add Copied Notification Feature in your Website.

What is Copied Notification

It is a very simple feature. If a visitor clicks on a prettier box once, it will immediately alert that visitor with copied notification and the information in the prettier box will be copied.

How to Add

So, to add Copied Notification Feature on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily add this feature in your blogger website.

Step 1

  • You will go to your - Blogger Dashboard
  • Go to Theme
  • Go to - Edit HTML
  • Search - </head> or &lt;/head&gt;
  • Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;

You must back up your theme before go to Edit HTML

<style>
.Cn span{position:fixed;left:25px;bottom:-150px;display:inline-flex;justify-content:center;margin-bottom:75px;z-index:99999;background:#ffffff;color:#000000;box-shadow:0 0 15px #000;border-radius:5px;padding:16px 25px;opacity:0;transition:all .1s ease;animation:slideup 2s ease forwards}
@media screen and (max-width:500px){.Cn span{margin-bottom:75px;left:25px;right:25px}}
@keyframes slideup{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-150px;visibility:hidden}}
</style>

Step 2

  • After Paste CSS Code
  • Search - </body> or &lt;/body&gt;
  • Copy this HTML & Javascript Code below and Paste before - </body> or &lt;/body&gt;
  • Done.
<div class='Cn'></div>
<script>/*<![CDATA[*/ 
for(var preClick=document.querySelectorAll("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("click",function(){var a=getSelection(),b=document.createRange();b.selectNodeContents(this),a.removeAllRanges(),a.addRange(b),document.execCommand("copy"),document.querySelector(".Cn").innerHTML="<span>Copied to Clipboard!</span>"},!1);
/*]]>*/</script>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.

Post a Comment

  • Aᴀ
  • A+
  • A-