Create a Blogger Script for Personalized Eid Greeting Cards

Answer:

لإنشاء سكربت على بلوجر يسمح للمستخدمين بإضافة أسمائهم إلى بطاقة تهنئة بالعيد وتنزيلها، يمكن استخدام HTML وJavaScript. هنا هو الكود الذي يمكنك استخدامه:

افتح لوح�� التحكم في بلوجر.
انتقل إلى "المظهر" ثم "تحرير HTML".
أضف الكود التالي في المكان المناسب داخل قالب بلوجر:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>بطاقة تهنئة بالعيد</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        #card {
            position: relative;
            display: inline-block;
        }
        #name {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            color: #fff;
            font-family: 'Cairo', sans-serif; /* يمكنك تغيير الخط هنا */
        }
        #downloadBtn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        #downloadBtn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>أضف اسمك إلى بطاقة تهنئة بالعيد</h1>
    <input type="text" id="userName" placeholder="أدخل اسمك هنا">
    <button onclick="addName()">إضافة الاسم</button>
    <div id="card">
        <img src="https://lh3.googleusercontent.com/-ApRtKRK0UWY/ZmnjrrTdH8I/AAAAAAAAAtA/0eB8Kl1VhL4KiNKaw3mYQI7eY2utgj7nQCEwYBhgLKvcEAA15w4JLZ9Cxvgi-H8HV0Rb4hCwfgO2D4pBMpLTqc4RydllJM0M1FEdix5kRripbD8tLI4jLKz6AWjZTN9Ijo_Kl4SPGhizcYQxtnarC22G3P7pNYnOkrdknxnHHL3YlJOPamTHKHunXGjX7c0beJjfI7CmhsRiznzHEkli48v6Q7LXVUHLOiojQA1sSTvK3HM-wSIl6WsOlMDPTN4cCZse4rk53oiLaOm-rXBewDeelKLMedVbxYRQMOzOqr7FBuTpe2mzJBGfwE0sTwMKCZBFD2gHV7p8FrFgvS20dIdYtgTZ0vZSzMfWUjjeJPNkcl1K7jhzTOidiJGtsaevgyomYMyDCRbW0NWCUoGcWd4XY1Lz-B7rkTwTU1mb-UCTcES15XFNCdkiPWn3F_UuhK35W9fP9bODyE9tceGFgzTZpHB7RJtadlQMqGBuYeJ0vfjFQd9h6nwJrmsk7zfL3EuU7yS8Ctt0OE8B-4RDD1kh8rU4ra8qIP26xW8P8u-Mr9-jwHdA4b6aIuMvgrUpGmiUr1qhUAPoeT8ZljaBKFT6_i4FLbwp9y55FPtL8613FIhvysgkXNLMSyYfeOnwnpP9dPGqljy-hCq4NlKIwtbAsZ7Zg1j1vsnDt1TQkWDV2n2cTUaB3Jz2z" alt="بطاقة تهنئة ب��لعيد">
        <div id="name"></div>
    </div>
    <button id="downloadBtn" onclick="downloadCard()">تنزيل البطاقة</button>

    <script>
        function addName() {
            var userName = document.getElementById('userName').value;
            var nameDiv = document.getElementById('name');
            nameDiv.innerText = userName;
        }

        function downloadCard() {
            var card = document.getElementById('card');
            html2canvas(card).then(function(canvas) {
                var link = document.createElement('a');
                link.download = 'بطاقة_تهنئة_بالعيد.png';
                link.href = canvas.toDataURL();
                link.click();
            });
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</body>
</html>

شرح الكود:

HTML:
- يحتوي على حقل إدخال للمستخدم لإدخال اسمه وزر لإضافة الاسم.
- يحتوي على صورة الب��اقة ومكان لإضافة الاسم عليها.
- يحتوي على زر لتنزيل البطاقة.
CSS:
- تنسيق الصفحة والعناصر المختلف��.
JavaScript:
- دالة addName لإضافة الاسم إلى البطاقة.
- دالة downloadCard لتحويل البطاقة إلى صورة وتنزيلها باستخدام مك��بة html2canvas.
مكتبة html2canvas:
- تستخدم لتحويل محتوى HTML إلى صورة يمكن تنزيلها.

ملاحظات:

تأكد من أن مكتبة html2canvas محملة بشكل صحيح.
يمكنك تعديل الخط وحجم النص وموقعه حسب الحاجة.

بمجرد إضافة هذا الكود إل�� قالب بلوجر الخاص بك، سيتمكن المستخدمون من إدخال أسمائهم وتنزيل بطاقة التهنئة بالعيد مع أسمائهم.

Create a Blogger Script for Personalized Eid Greeting Cards

Answered using ChatGPT 4o by ChatGPT4o

شرح الكود:

ملاحظات: