cropped-mr
ورود و ثبت نام
ورود | ثبت نام
captcha
با ورود و یا ثبت نام در آقای طراحی شما شرایط و قوانین استفاده از سرویس‌های سایت آقای طراحی و قوانین حریم خصوصی آن را می‌پذیرید.

ساخت دکمه کپی شونده [برای کد تخفیف المنتور]

ساخت دکمه کپی شونده [برای کد تخفیف المنتور]

من خیلی دنبال این کد گشتم ولی چیز درست حسابی پیدا نکردم کسایی که دوست دارند یه دکمه کپی شونده داشته باشند هم می تونند درسایت خودشون به عنوان html و css و javscript وارد کنند و یا نیازی نیست برای المنتور افزونه جانبی نصب کرد کافیه با گذاشتن المان HTML این کد رو درونش کپی کنید و متن های شخصی کد تخفیف خودتون رو جایگزین متن های من بکنید . این کد زیر مخصوص کسایی هستش که نیاز به این دارند در المنتور این دکمه رو داشته باشند.

 

کد های زیر رو می تونید برای سایت هایی که نیاز به اینه کد نویسی html , css و javascript بشه برای شما این کد هارو جدا جدا گذاشتم استفاده کنید.
دکمه کپی شونده
  <style>
        .container {
            text-align: center;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .code-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .code {
            font-size: 18px;
            margin: 0;
            padding: 0;
        }
        .copy-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .copy-btn:hover {
            background-color: #45a049;
        }
  h2,h3{
font-weight:900;}
    </style>
    <div class=”container”>
<h3>کد تخفیف 10 درصدی</h3><br>
<h4>برای 15 نفر اول</h4>
        <div class=”code-container”>
            <p class=”code” id=”code”>تغییر کد تخفیف</p>
            <button class=”copy-btn” onclick=”copyCode()”>کپی</button>
        </div>
    </div>
    <script>
        function copyCode() {
            // Get the discount code text
            var code = document.getElementById(“code”).innerText;
            // Create a temporary textarea to hold the text
            var tempTextarea = document.createElement(“textarea”);
            tempTextarea.value = code;
            document.body.appendChild(tempTextarea);
            // Select the text in the textarea and copy it
            tempTextarea.select();
            document.execCommand(“copy”);
            // Remove the temporary textarea
            document.body.removeChild(tempTextarea);
            // Notify the user that the code has been copied
            alert(“کد تخفیف کپی شد: ” + code);
        }
    </script>

HTML دکمه کپی شونده :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Copy Discount Code</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<button class=”copy-btn” onclick=”copyCode()”>کپی کد تخفیف</button>
<p id=”code” style=”display:none;”>DISCOUNT2024</p>
</div>
<script src=”script.js”></script>
</body>
</html>

CSS دکمه کپی شونده(styles.css)

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}

.container {
text-align: center;
}

.copy-btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 30px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.copy-btn:hover {
background-color: #45a049;
}

JavaScript دکمه کپی شونده(script.js):

function copyCode() {
// Get the discount code text
var code = document.getElementById(“code”).innerText;

// Create a temporary textarea to hold the text
var tempTextarea = document.createElement(“textarea”);
tempTextarea.value = code;
document.body.appendChild(tempTextarea);

// Select the text in the textarea and copy it
tempTextarea.select();
document.execCommand(“copy”);

// Remove the temporary textarea
document.body.removeChild(tempTextarea);

// Notify the user that the code has been copied
alert(“کد تخفیف کپی شد: ” + code);
}

  • HTML: ساختار اصلی صفحه را تعریف می‌کند، شامل یک دکمه و یک پاراگراف که کد تخفیف در آن قرار دارد.
  • CSS: استایل دهی به دکمه و سایر عناصر صفحه.
  • JavaScript: تابع copyCode برای کپی کردن متن کد تخفیف به کلیپ بورد و نمایش پیغام به کاربر.

این کد به شما یک دکمه زیبا می‌دهد که با کلیک روی آن کد تخفیف کپی می‌شود و به کاربر اطلاع داده می‌شود که کد تخفیف کپی شده است. اگر سوال یا تغییری نیاز دارید، لطفاً بفرمایید!

منبع : خودم 

درباره نویسنــده
نویسنده
ahmad_ah
نظرات کاربـــران
فاقد دیدگاه
دیدگاهی برای این مطلب ثبت نشده است. اولین دیدگاه را شما بنویسید.
ثبت دیدگاه
مطالب مرتبـــط

دسته بندی مطالب

محصولات جدید

جستجو کنید ...