الصحة ,منوعات,اسرة,اخبار,قصص,

 صندوق اكواد اضافة يدعم الوضع الداكن والفاتح تلقائيا ويدبويا صندوق احترافى يدعم الوضع الداكن وتكرار اكثر من صندوق ✅ الوضع الفاتح والداكن تلقائيًا حسب النظام أهمية صندوق الأكواد   يعد تقديم الأكواد داخل إطار منسق واحترافي أمرًا ضروريًا لمدونتك، خاصة إذا كانت مقالاتك تتناول دروسًا تعليمية، معلومات تقنية، أو تطوير برمجيات. ذلك يسهل على زوار الموقع نسخ…

صندوق اكواد احترافى يعد فهم نموذج الصندوق (Box Model) في CSS أحد الأساسيات التي تحتاج إلى استيعابها لإنشاء تخطيطات فعالة وتصميم عناصر الويب بطريقة منظمة. يمثل هذا النموذج البنية الأساسية التي يمكن من خلالها التحكم في محاذاة العناصر، أبعادها، والمسافات بينها. في هذا المقال، سنلقي نظرة شاملة على نموذج الصندوق، لفهم كيفية عمله واستخدامه لإنشاء…

 صندوق يدعم اكتشاف تلقائي للغة الكود عرض اسم اللغة أعلى الصندوق.  يدعم التوسيع/النسخ/التحديد/التحميل/النافذة المنبثقة. .code-box { position: relative; background: #272822; color: #f8f8f2; border-radius: 10px; padding: 15px; margin: 20px auto; font-family: monospace; direction: ltr; overflow: auto; max-width: 100%; } .code-label { position: absolute; top: -12px; left: 15px; background: #ff9800; color: #fff; font-size: 12px; padding: 2px 8px; border-radius:…

 استخدام صناديق متعددة بدون تعارض كود صندوق يدعم صناديق متعددة .code-box { position: relative; background: #272822; color: #f8f8f2; border-radius: 10px; padding: 15px; margin: 20px auto; font-family: monospace; direction: ltr; overflow: auto; max-width: 100%; } .code-box textarea { width: 100%; height: 250px; background: transparent; border: none; color: #f8f8f2; resize: none; font-size: 14px; outline: none; } .code-buttons…

Simple code box اليك صندوق اكواد مثالى وبسيط واحترافى شكل الكود كالتالى .code-box { position: relative; background: #272822; color: #f8f8f2; border-radius: 10px; padding: 15px; margin: 20px auto; font-family: monospace; direction: ltr; overflow: auto; } .code-box textarea { width: 100%; height: 250px; background: transparent; border: none; color: #f8f8f2; resize: none; font-size: 14px; outline: none; } .code-buttons…

نسخة مُحسّنة من الصندوق تدعم تمييز الأكواد (syntax highlighting) لعدة لغات مثل HTML، CSS، JavaScript، وغيرها باستخدام مكتبة Prism.js، مع نفس المزايا السابقة مثل: صندوق كود يدعم لغات متعددة + مزايا متقدمة نسخ الكود تحميل الكود توسيع / تصغير الوضع الداكن تحديد الكل دعم عدة لغات تلقائيًا ✅ صندوق كود يدعم لغات متعددة + مزايا…

 صندوق يحتوى على زر ✅ “تحديد الكل” بجانب أزرار النسخ والتحميل. :root { –bg-light: #f5f5f5; –text-light: #333; –bg-dark: #1e1e1e; –text-dark: #dcdcdc; –blue-light: #007BFF; –blue-dark: #2d89ef; –blue-dark-hover: #1b61c1; } .code-box { position: relative; border-radius: 12px; padding: 20px; margin: 30px auto; font-family: ‘Courier New’, monospace; direction: ltr; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.1); max-width: 800px; background-color: var(–bg-light);…

  صندوق اكواد بزر توسيع وتصغير وادراج عنوان ووصف ✅ زر توسيع/تصغير الصندوق ✅ عنوان أعلى الصندوق ✅ وصف تحت العنوان ✅ الوضع الليلي/النهاري تلقائي وزر التبديل ✅ نسخ وتحميل الكود توجد العديد من المدونات التي تهتم بشرح لغات البرمجة، مثل لغة HTML، حيث يتم استخدام أكواد طويلة جدًا داخل المقالات. ولذلك يكون من الضروري…

سكريبت لتحويل المدونة لمدونة اخرى نتناول اليوم كيفية إعادة توجيه رابط مدونة بلوجر إلى مدونة أو موقع آخر بهدف توصيل الزوار بشكل تلقائي إلى المدونة الجديدة التي تختارها. هذه الطريقة تساعدك على تحقيق أهداف متعددة، مثل: 1. توجيه الزوار إلى مدونة جديدة تقوم بإنشائها.   2. تحويل الاستضافة المجانية لبلوجر إلى استضافة مدفوعة.   3. نقل مدونتك…

صندوق اكواد بخاصية تبديل الألوان تلقائيًا حسب الوضع الداكن أو الفاتح (Dark/Light Mode) بناءً على إعدادات المتصفح أو النظام. صندوق اكواد بخاصية تبديل الألوان تلقائيًا /* التصميم الأساسي الفاتح */ .code-box { position: relative; background: #f5f5f5; color: #333; border-radius: 12px; padding: 20px; margin: 30px auto; font-family: ‘Courier New’, monospace; direction: ltr; overflow: hidden; box-shadow: 0…