in

Copy to Clipboard in WordPress Website ( Text and Code Click to Copy Button )

WordPress Website – Copy to Clipboard ( Text and Code Click to Copy Button ) https://youtu.be/MXkUCFo5n9g

✅ Timestamp
00:00 Intro
00:12 Install & Activate Copy Anything to Clipboard Plugin in Your WordPress Website
00:43 Add Text or Code in Between Pre tag in the post
03:12 Add CSS in Additional CSS
03:52 Customize Clipboard
04:16 Customize Copy Button

✪ Steps to Add Copy to Clipboard WordPress Website
– Login to Your WordPress Website Dashboard
– Hover on Plugins Tab
– Click on Add New
– Now Search for Copy Anything to Clipboard
– Install & Activate This Plugin https://wordpress.org/plugins/copy-the-code/
– Now Simply Add Text or Code with Pre tag
– Add CSS to Customize Copy to Clipboard
– Done.

Copy To Clipboard  – Add This CSS in Additional CSS 👇👇

/*------- CSS for Copy to ClipBoard ------*/

.copy-the-code-wrap {
box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
}

.copy-the-code-wrap .copy-the-code-target {
color: #7a7a7a;
background: #eee;
font-size: 13px;
font-family: 
}

.copy-the-code-wrap .copy-the-code-button {
top: 0;
right: 0;
padding: 10px 20px;
color: #fff;
font-family: roboto;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
background: #0066ff;
}


.copy-the-code-wrap .copy-the-code-button:hover {
background: #000;
}

/*----------XXX-- CSS for Copy to ClipBoard -----XXX--------*/

CSS for Gradient Color on Copy to Click Button 👇👇

background: #first-color;
background: -webkit-linear-gradient(to right, #first-color, #second-color);
background: linear-gradient(to right, #first-color, #second-color);

CSS For Hover Gradient Color on Copy to Click Button 👇👇

background: #second-color;
background: -webkit-linear-gradient(to right, #second-color, #first-color);
background: linear-gradient(to right, #second-color, #first-color);

More From WordPress

How to Fix Blurry Logo on WordPress Website
How To Create An Email Address in cPanel For Your Website WordPress
Fix Google AdSense ads txt file issues in WordPress Website With Advanced Ads Plugin
How to Install WordPress on localhost on PC | How to Install WordPress Locally on your PC or Laptop
PHP Update Required / update PHP version in WordPress website
How to Get a Free SSL on WordPress Website with Cloudflare
How to Display Popular Posts in WordPress Website
Post Grid on WordPress | How To Display WordPress Posts in Grid Layout

Leave a Reply

Your email address will not be published. Required fields are marked *