مكتبة الأكواد
-
اذا كنت مهتم بالتدوين وتريد جعل مدونتك تظهر بمظهر متميز اليك مجموعة من الاكواد لتغيير شكل الصفحة الرئيسية اولا كود يجعل المحتوى فى الرئيسية يظهر بدون الشريط الجانبى . .button-outline-blue { display: inline-block; padding: 10px 20px; margin: 10px 5px; font-size: 16px; font-weight: bold; color: #007BFF; /* أزرق */ background-color: #ffffff; /* أبيض */ border:…
-
أكيد! لو حاب تظهر الصفحة الرئيسية فقط بدون الشريط الجانبي (sidebar) في بلوجر، تقدر تستخدم كود CSS بسيط داخل وسم في الـ داخل أو حسب مكان القالب. كود إخفاء الشريط الجانبي في الصفحة الرئيسية فقط hljs.highlightAll(); :root { –code-bg: #f5f5f5; –code-color: #333; –button-bg: #007BFF; –button-color: white; –title-color: #d84315; } [data-theme=”dark”] { –code-bg: #1e1e1e; –code-color: #f5f5f5;…
-
تقصير الروابط تلقائيًا باستخدام PHP وMySQL. صفحة وسيطة تحتوي على إعلان قبل إعادة التوجيه. تصميم أنيق ومتجاوب. لوحة تسجيل دخول مستقبلية ممكنة لإدارة الروابط (إذا رغبت لاحقًا). 📦 المحتويات : قاعدة بيانات links_db مع جدول links. صفحة index.php لتقصير الروابط. صفحة redirect.php لعرض إعلان ثم إعادة التوجيه. تصميم CSS أنيق. كود إعلاني جاهز لإضافته في…
-
اليك اشكال متعددة من ازرار التحميل والمعاينة التى لها فوائد بالمدونة وعليك ان تختار الشكل الذى يناسبك ويناسب مدونتك وكل كود منهم له مميزات مختلفة عن الاخر هل ترغب في معرفة كيفية إضافة أزرار المعاينة والتحميل لموقعك بشكل احترافي؟ سنوفر لك في هذا المقال ثلاث أزرار مميزة: زر للمعاينة، زر للتحميل، وزر ثالث عام يمكن…
-
خدمة ضغط الصور وإضافة العلامة المائية بشكل احترافي أداة ضغط وتعديل الصور :root { –bg: #f9f9f9; –text: #222; –card: #fff; –accent: #0965e9; } @media (prefers-color-scheme: dark) { :root { –bg: #121212; –text: #eee; –card: #1e1e1e; –accent: #81C784; } } body { background: var(–bg); color: var(–text); font-family: ‘Segoe UI’, Tahoma, sans-serif; margin: 0; padding: 20px; text-align:…
-
مميزات إضافة صفحة ضغط الصور إلى موقعك، يمكنك استخدامه في موقعك أو كتيب تعريفي أو صفحة خدمات: 💡 مميزات إضافة صفحة ضغط الصور إلى موقعك: ✅ 1. تحسين تجربة المستخدم: توفر أداة ضغط الصور وسيلة سهلة وسريعة للزوار لضغط صورهم دون الحاجة لمغادرة الموقع أو استخدام أدوات خارجية. ⚡ 2. أداء فائق وسرعة ضغط عالية:…
-
صندوق اكواد اضافة يدعم الوضع الداكن والفاتح تلقائيا ويدبويا صندوق احترافى يدعم الوضع الداكن وتكرار اكثر من صندوق ✅ الوضع الفاتح والداكن تلقائيًا حسب النظام أهمية صندوق الأكواد يعد تقديم الأكواد داخل إطار منسق واحترافي أمرًا ضروريًا لمدونتك، خاصة إذا كانت مقالاتك تتناول دروسًا تعليمية، معلومات تقنية، أو تطوير برمجيات. ذلك يسهل على زوار الموقع نسخ…
-
صندوق اكواد احترافى يعد فهم نموذج الصندوق (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…
sehaa 