<!--انسخ الكود من هنا وضعه في صفحة جديدة في بلوجر في وضع (عرض HTML)--> <style> @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap'); .ai-doc-wrapper { font-family: 'Tajawal', sans-serif; direction: rtl; text-align: right; color: #334155; background: #f8fafc; padding: 30px; border-radius: 16px; line-height: 1.8; } .ai-header { text-align: center; margin-bottom: 40px; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); padding: 40px; border-radius: 16px; color: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2); } .ai-header h1 { font-size: 36px; font-weight: 900; margin: 0 0 10px; background: linear-gradient(to right, #38bdf8, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ai-header p { font-size: 18px; color: #94a3b8; max-width: 600px; margin: 0 auto; } .step-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 25px; margin-bottom: 30px; position: relative; overflow: hidden; } .step-box::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; background: #3b82f6; } .step-title { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } .step-num { background: #3b82f6; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; } .step-title h2 { margin: 0; font-size: 22px; color: #0f172a; } .code-block { background: #1e293b; color: #a5f3fc; padding: 15px; border-radius: 8px; font-family: monospace; direction: ltr; text-align: left; margin: 15px 0; position: relative; overflow-x: auto; } .copy-btn { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.1); color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-family: 'Tajawal'; font-size: 12px; } .copy-btn:hover { background: rgba(255,255,255,0.2); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; } .feature-card { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; text-align: center; } .feature-icon { font-size: 40px; margin-bottom: 10px; display: block; } .feature-card h3 { margin: 0 0 10px; color: #0f172a; } .feature-card p { font-size: 14px; color: #64748b; margin: 0; } .important-alert { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 14px; display: flex; align-items: center; gap: 10px; } </style> <div class="ai-doc-wrapper"> <div class="ai-header"> <h1>تفعيل الذكاء الاصطناعي (Gemini AI) 🧠</h1> <p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjXRRHaol0be3i_nhnk7a1paI6YznLar-rdaUAyObpR4hUw1M1X3d7TYomC6bG2ieGSS78L7CuAtCOevV9M3d7Q8Z-UgXEvjryxW8gKogvT2nwxbkVbsRHE2RbtvRy2uG54Dayqj5JCu0xsB-C2SCUKUFE6FT7vPhP6my3o8GUepWQ-K5GpnR1wKBr56Io" 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/AVvXsEjXRRHaol0be3i_nhnk7a1paI6YznLar-rdaUAyObpR4hUw1M1X3d7TYomC6bG2ieGSS78L7CuAtCOevV9M3d7Q8Z-UgXEvjryxW8gKogvT2nwxbkVbsRHE2RbtvRy2uG54Dayqj5JCu0xsB-C2SCUKUFE6FT7vPhP6my3o8GUepWQ-K5GpnR1wKBr56Io=s16000-rw" /></a></div><p></p><p>حول مدونتك إلى منصة ذكية! اجعل موقعك يجيب على أسئلة الزوار ويشرح لهم المحتوى تلقائياً باستخدام تقنيات جوجل.</p> </div> <!--Step 1--> <div class="step-box"> <div class="step-title"> <div class="step-num">1</div> <h2>الحصول على مفتاح API (مجاناً)</h2> </div> <p>تعتمد الميزة على نموذج <b>Google Gemini</b>، وهو مجاني وسريع جداً.</p> <ol> <li>اذهب إلى موقع <a href="https://aistudio.google.com/app/apikey" style="color: #3b82f6; font-weight: bold;" target="_blank">Google AI Studio</a>.</li> <li>سجل الدخول بحساب Gmail الخاص بك.</li> <li>اضغط على زر <b>Create API key</b>.</li> <li>اختر <b>Create API key in new project</b>.</li> <li>سيظهر لك كود طويل (يبدأ بـ AIza...)، هذا هو مفتاحك، انسخه واحتفظ به.</li> </ol> </div> <!--Step 2--> <div class="step-box"> <div class="step-title"> <div class="step-num">2</div> <h2>إنشاء صفحة الإعدادات السرية 🔒</h2> </div> <p>لحماية مفتاحك من السرقة، لا نضعه في كود القالب مباشرة. سنقوم بتخزينه في صفحة خاصة.</p> <ol> <li>اذهب إلى لوحة تحكم بلوجر &gt; <b>الصفحات (Pages)</b>.</li> <li>أنشئ <b>صفحة جديدة</b>.</li> <li>في عنوان الصفحة، اكتب بالضبط: <span style="background: rgb(226, 232, 240); border-radius: 4px; font-weight: bold; padding: 2px 6px;">AI-Config</span></li> <li>حول المحرر إلى وضع <b>عرض HTML</b> (وليس وضع الإنشاء).</li> <li>امسح أي كود موجود، والصق الكود التالي:</li> </ol> <div class="code-block"> <button class="copy-btn" onclick="copyAiCode()">نسخ</button> <code id="aiCode">&lt;div id="secret-key-storage" style="display:none;"&gt;ضع_مفتاح_API_هنا&lt;/div&gt;</code> </div> <div class="important-alert"> ⚠️ <b>تنبيه:</b> استبدل عبارة "ضع_مفتاح_API_هنا" بالمفتاح الذي نسخته في الخطوة الأولى. لا تترك أي مسافات. </div> <p style="margin-top: 15px;">6. اضغط <b>نشر (Publish)</b>. لا تقلق، هذه الصفحة لن تظهر للزوار في القوائم، لكن القالب سيقرأ منها المفتاح.</p> </div> <!--Features Showcase--> <h2 style="color: #0f172a; margin: 40px 0px 20px; text-align: center;">ماذا ستحصل بعد التفعيل؟ ✨</h2> <div class="feature-grid"> <div class="feature-card"> <span class="feature-icon">🤖</span> <h3>المساعد الذكي (Chatbot)</h3> <p>أيقونة عائمة تفتح محادثة ذكية. يمكن للزائر سؤال البوت عن أي محتوى داخل مدونتك وسيجيبه فوراً مع ذكر المصادر.</p> </div> <div class="feature-card"> <span class="feature-icon">📝</span> <h3>ميزة "توضيح النص"</h3> <p>عندما يحدد الزائر أي نص داخل المقال، سيظهر له زر "توضيح". عند الضغط عليه، سيقوم الذكاء الاصطناعي بشرح الفقرة وتبسيطها.</p> </div> <div class="feature-card"> <span class="feature-icon">💡</span> <h3>صندوق الأسئلة (Q&amp;A)</h3> <p>أسفل كل مقال، سيجد الزائر صندوقاً ليسأل: "ما ملخص هذا المقال؟" أو "ما هي النقاط الرئيسية؟" وسيجيب الـ AI بناءً على المقال الحالي فقط.</p> </div> </div> </div> <script> function copyAiCode() { const code = document.getElementById('aiCode').innerText; navigator.clipboard.writeText(code).then(() => { alert('تم نسخ الكود! ضعه الآن في صفحة AI-Config.'); }); } </script>