اضافات بلوجر

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

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