<!--انسخ الكود وضعه في صفحة جديدة باسم: تخصيص المظهر ومولد صفحة الاتصال--> <style> @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap'); .cust-wrapper { font-family: 'Tajawal', sans-serif; direction: rtl; text-align: right; color: #334155; background: #fff; padding: 30px; border-radius: 16px; border: 1px solid #e2e8f0; } .cust-header { text-align: center; margin-bottom: 40px; background: #f8fafc; padding: 30px; border-radius: 12px; border-bottom: 4px solid #8b5cf6; } .cust-header h1 { margin: 0 0 10px; color: #1e293b; font-weight: 900; font-size: 32px; } .cust-header p { font-size: 16px; color: #64748b; } /* قسم الألوان */ .section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px dashed #f1f5f9; } .section-icon { font-size: 24px; background: #f3e8ff; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .section-title h2 { margin: 0; color: #5b21b6; font-size: 22px; } .color-steps { background: #fdf4ff; border: 1px solid #f0abfc; padding: 20px; border-radius: 12px; margin-bottom: 40px; } .color-steps ol { margin: 0; padding-right: 20px; } .color-steps li { margin-bottom: 8px; font-weight: 600; color: #4a044e; } /* مولد نموذج الاتصال */ .generator-box { background: #fff; border: 2px solid #e2e8f0; border-radius: 16px; padding: 25px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05); } .input-area { margin-bottom: 20px; } .input-label { display: block; font-weight: 800; margin-bottom: 10px; color: #0f172a; font-size: 15px; } .email-input-wrapper { display: flex; gap: 10px; } .email-input { flex: 1; padding: 12px 15px; border: 2px solid #3b82f6; border-radius: 8px; font-family: inherit; font-size: 16px; outline: none; direction: ltr; text-align: left; background: #eff6ff; color: #1e3a8a; font-weight: bold; } .email-input:focus { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); } .generate-btn { background: #3b82f6; color: #fff; border: none; padding: 0 25px; border-radius: 8px; font-weight: bold; cursor: pointer; font-family: 'Tajawal'; transition: 0.2s; } .generate-btn:hover { background: #2563eb; transform: translateY(-2px); } /* منطقة الكود */ .code-output { position: relative; background: #0f172a; border-radius: 12px; padding: 20px; direction: ltr; text-align: left; margin-top: 20px; border: 1px solid #1e293b; } .code-pre { color: #38bdf8; font-family: monospace; font-size: 13px; white-space: pre-wrap; word-break: break-all; max-height: 400px; overflow-y: auto; } .copy-code-btn { position: absolute; top: 15px; right: 15px; background: rgba(255,255,255,0.15); color: #fff; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; font-family: 'Tajawal'; font-size: 13px; font-weight: bold; backdrop-filter: blur(5px); transition: 0.2s; } .copy-code-btn:hover { background: #10b981; } .activation-note { margin-top: 20px; padding: 15px; background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px; color: #9a3412; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; } .icon-note { font-size: 20px; } </style> <div class="cust-wrapper"> <div class="cust-header"> <h1>تخصيص المظهر وصفحة الاتصال 🎨</h1> <p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEg1atJn_4avzjXoANyCAQFe2kJZd5x1l5Epk_AZTc-T7ADz9mST6IW5w3FP0FirgoZN9iuuZYiuWWeDHWrFiHwHiNvJsi3iIJCbbmr-NRlT9dRAtVBVOy7RZmyF3ZWQkywynwFTv4f76orqy7vwHTbbpNZZAqzlAespj5wkqYtB4jBywsL-4Ea5CSFMtyA" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="720" data-original-width="1280" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEg1atJn_4avzjXoANyCAQFe2kJZd5x1l5Epk_AZTc-T7ADz9mST6IW5w3FP0FirgoZN9iuuZYiuWWeDHWrFiHwHiNvJsi3iIJCbbmr-NRlT9dRAtVBVOy7RZmyF3ZWQkywynwFTv4f76orqy7vwHTbbpNZZAqzlAespj5wkqYtB4jBywsL-4Ea5CSFMtyA=s16000-rw" /></a></div><p></p><p>تحكم في ألوان موقعك وأنشئ صفحة "اتصل بنا" المربوطة ببريدك بضغطة زر.</p> </div> <!--1. الألوان--> <div class="section-title"> <div class="section-icon">🌈</div> <h2>1. تغيير ألوان وخطوط الموقع</h2> </div> <div class="color-steps"> <p style="margin-top: 0px;">لتغيير اللون الرئيسي (الأزرق) أو ألوان الوضع الليلي دون لمس الأكواد:</p> <ol> <li>اذهب إلى لوحة تحكم بلوجر &gt; <b>المظهر (Theme)</b>.</li> <li>اضغط على زر <b>تخصيص (Customize)</b>.</li> <li>اختر <b>"متقدم" (Advanced)</b> من القائمة الجانبية.</li> <li>ستجد إعدادات الألوان والخطوط، غيّرها كما تحب وستظهر التغييرات فوراً.</li> </ol> </div> <!--2. مولد صفحة الاتصال--> <div class="section-title"> <div class="section-icon">✉️</div> <h2>2. مولد صفحة "اتصل بنا" (Contact Form Generator)</h2> </div> <p>هذه الأداة ستقوم بإنشاء الكود الكامل لصفحة "اتصل بنا" الحديثة (التي تعمل بدون إعادة تحميل الصفحة)، وتربطها ببريدك الإلكتروني تلقائياً.</p> <div class="generator-box"> <div class="input-area"> <label class="input-label">أدخل بريدك الإلكتروني الذي ستستقبل عليه الرسائل:</label> <div class="email-input-wrapper"> <input class="email-input" id="userEmail" oninput="generateContactCode()" placeholder="example@gmail.com" type="email" /> <!--زر وهمي للشكل الجمالي--> <button class="generate-btn" onclick="generateContactCode()">تحديث الكود 🔄</button> </div> </div> <div class="code-output"> <button class="copy-code-btn" onclick="copyFinalCode()">نسخ الكود 📋</button> <div class="code-pre" id="finalCodeOutput"> <!--الكود سيظهر هنا--> &lt;!-- يرجى كتابة بريدك الإلكتروني في الأعلى ليظهر الكود --&gt; </div> </div> <div class="activation-note"> <span class="icon-note">⚠️</span> <div> <b>خطوة التفعيل (مهمة جداً):</b><br /> بعد وضع الكود في الصفحة ونشرها، قم بإرسال رسالة تجريبية لنفسك. ستصلك رسالة تفعيل على إيميلك من خدمة (FormSubmit)، اضغط على زر <b>Activate</b> داخلها ليعمل النموذج بشكل دائم. </div> </div> </div> <div style="margin-top: 30px;"> <h3>📌 أين أضع هذا الكود؟</h3> <ol> <li>أنشئ <b>صفحة جديدة</b> في بلوجر بعنوان "اتصل بنا".</li> <li>من إعدادات الصفحة (يسار الشاشة) &gt; خيارات &gt; اختر <b>عدم السماح بالتعليقات</b>.</li> <li>حول المحرر إلى وضع <b>عرض HTML</b>.</li> <li>امسح أي شيء موجود، والصق الكود الذي نسخته من الأعلى.</li> <li>اضغط <b>نشر</b>.</li> </ol> </div> </div> <script> // القالب الثابت للكود const cssPart = `<style> .contact-form-wrapper { max-width: 700px; margin: 40px auto; padding: 30px; background-color: var(--bg-container); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); } .contact-form-header h2 { text-align: center; font-size: 28px; color: var(--text-primary); margin-top: 0; margin-bottom: 10px; } .contact-form-header p { text-align: center; font-size: 16px; color: var(--text-secondary); margin-top: 0; margin-bottom: 30px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; font-size: 15px; } .form-group input, .form-group textarea { width: 100%; padding: 12px 15px; font-size: 16px; border: 1px solid var(--border-color); border-radius: 8px; transition: all 0.2s; background-color: var(--input-bg); color: var(--text-primary); box-sizing: border-box; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2); } .form-group textarea { min-height: 150px; resize: vertical; } .form-submit-button { display: block; width: 100%; background-color: var(--accent-blue); color: #fff; border: none; padding: 14px 30px; font-size: 17px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: all 0.2s; } html[data-theme='dark'] .form-submit-button { color: #0f172a; } .form-submit-button:hover { transform: translateY(-2px); opacity: 0.9; } .form-submit-button:disabled { background-color: #9ca3af; cursor: not-allowed; } .form-success-message { text-align: center; padding: 40px 20px; border: 2px dashed var(--accent-blue); border-radius: 12px; background-color: var(--bg-hover); } .form-success-message h3 { font-size: 24px; color: var(--text-primary); margin: 0 0 10px 0; } .form-success-message p { font-size: 16px; color: var(--text-secondary); margin: 0; } </style>`; const jsPart = `<script> //<![CDATA[ const contactForm = document.getElementById('contact-form'); const contactWrapper = document.getElementById('contact-wrapper'); const submitBtn = document.getElementById('submit-btn'); contactForm.addEventListener('submit', function (e) { e.preventDefault(); const formData = new FormData(contactForm); submitBtn.disabled = true; submitBtn.textContent = 'جاري الإرسال...'; fetch(contactForm.action, { method: 'POST', body: formData, headers: { 'Accept': 'application/json' } }).then(response => { if (response.ok) { contactWrapper.innerHTML = \` <div class="form-success-message"> <h3>تم استلام رسالتك بنجاح!</h3> <p>شكراً لتواصلك معنا، سنقوم بالرد عليك في أقرب وقت ممكن.</p> </div>\`; } else { alert('عفواً، حدث خطأ. يرجى المحاولة مرة أخرى.'); submitBtn.disabled = false; submitBtn.textContent = 'إرسال الرسالة'; } }).catch(error => { alert('عفواً، حدث خطأ في الاتصال.'); submitBtn.disabled = false; submitBtn.textContent = 'إرسال الرسالة'; }); }); //]]> <\/script>`; function generateContactCode() { const email = document.getElementById('userEmail').value.trim(); const output = document.getElementById('finalCodeOutput'); if (!email) { output.innerText = "<!-- يرجى كتابة بريدك الإلكتروني في الخانة أعلاه لإنشاء الكود -->"; return; } const htmlPart = ` <div class="contact-form-wrapper" id="contact-wrapper"> <form action="https://formsubmit.co/${email}" id="contact-form" method="POST"> <div class="contact-form-header"> <h2>تواصل معنا</h2> <p>هل لديك سؤال أو استفسار؟ يرجى ملء النموذج أدناه.</p> </div> <div class="form-group"> <label>الاسم بالكامل</label> <input id="name" name="name" placeholder="اكتب اسمك هنا..." required="" type="text" /> </div> <div class="form-group"> <label>البريد الإلكتروني</label> <input id="email" name="email" placeholder="بريدك الإلكتروني..." required="" type="email" /> </div> <div class="form-group"> <label>الموضوع</label> <input id="subject" name="subject" placeholder="موضوع رسالتك..." required="" type="text" /> </div> <div class="form-group"> <label>الرسالة</label> <textarea id="message" name="message" placeholder="اكتب رسالتك بالتفصيل هنا..." required=""></textarea> </div> <input name="_subject" type="hidden" value="رسالة جديدة من المدونة!" /> <input name="_captcha" type="hidden" value="false" /> <button class="form-submit-button" id="submit-btn" type="submit">إرسال الرسالة</button> </form> </div>`; output.innerText = cssPart + "\n" + htmlPart + "\n" + jsPart; } function copyFinalCode() { const code = document.getElementById('finalCodeOutput').innerText; if (code.includes("يرجى كتابة بريدك")) { alert("الرجاء كتابة البريد الإلكتروني أولاً!"); document.getElementById('userEmail').focus(); return; } navigator.clipboard.writeText(code).then(() => { const btn = document.querySelector('.copy-code-btn'); btn.innerText = "تم النسخ! ✅"; btn.style.background = "#10b981"; setTimeout(() => { btn.innerText = "نسخ الكود 📋"; btn.style.background = "rgba(255,255,255,0.15)"; }, 2000); }); } </script>