بلوجر

صندوق اكواد احترافى يعد فهم نموذج الصندوق (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:…

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…

  نسخة محسّنة من صندوق الكود بمظهر أنيق، ألوان مريحة، وأزرار بشكل عصري (مستوحى من التصميمات الحديثة مثل Visual Studio Code أو المواقع التعليمية). لغة ترميز النص التشعبي (HTML) هي لغة أساسية لتطوير صفحات الإنترنت وتُستخدم لعرض المحتوى على شبكة الويب العالمية. تمثل مجموعة من الأكواد المُدرجة داخل ملفات خاصة تقوم متصفحات الويب بقراءتها وترجمتها إلى…

 صندوق اكواد رقم 1 احترافى بوب .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%; min-height: 150px; background: transparent; border: none; color: #f8f8f2; resize: none; font-size: 14px; outline: none; overflow: hidden; line-height: 1.4em; } .code-buttons { display:…