- 2024-03-23
- 461
السلام عليكم ورحمة الله وبركاته،
معنا اليوم كود جديد عبارة عن نافذة اعلانية جذابة وبسيطة يمكن التعديل عليها بسهولة واستخدامها في صفحة او موقع.
الكود ينشئ نافذة منبثقة جذابة مصممة لجلب انتباه المستخدمين على موقع "منتديات عراق ماستر". النافذة تتضمن صورة ترويجية ونص دعوة للتسجيل في المنتدى مع رابط مباشر لصفحة التسجيل.
تفاصيل التصميم: استجابة ومرنة
التصميم يستخدم
Flexbox لتنظيم العناصر بشكل يتناسب مع أحجام الشاشات المختلفة، ويستخدم استعلامات الوسائط (Media Queries) لتعديل تخطيط النافذة على الشاشات الصغيرة مثل تلك الموجودة في الأجهزة المحمولة.الاستخدامات الممكنة: ديناميكي وقابل للتخصيص
يمكن استخدام هذا الكود في مجموعة واسعة من المواقع الإلكترونية لعرض إعلانات، تنبيهات، أو دعوات للتسجيل. بفضل قاعدته المرنة، يسهل تخصيص النافذة لتناسب متطلبات المحتوى المختلفة والعلامات التجارية.
التحكم في المتغيرات: بساطة وفعالية
- `IQPobad1-overlay`: للتحكم في خلفية النافذة المنبثقة.
- `IQPobad1-content`: لتخصيص النافذة الداخلية، بما في ذلك الخلفية، الظلال، والتباعد.
- `IQPobad1-close`: يحدد تصميم زر الإغلاق.
- `IQPobad1-image`: للتحكم في ظهور وتنسيق الصورة الإعلانية.
- `IQPobad1-register-link`: يحدد المظهر الخارجي لرابط التسجيل.
- `IQPobad1-footer`: يستخدم لإضافة حقوق النشر وروابط أخرى في أسفل النافذة.
جزء من الكود:
CSS:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>إعلان عراق ماستر</title>
<style>
/* تصميم النافذة المنبثقة والخلفية */
.IQPobad1-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.IQPobad1-content {
background-color: white;
padding: 20px;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
font-size: 16px;
color: #333;
}
.IQPobad1-close {
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
font-size: 24px;
background: none;
border: none;
color: #333;
}
.IQPobad1-register-link {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background-color: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
.IQPobad1-footer {
font-size: 12px;
color: #666;
margin-top: 15px;
}
</style>
</head>
<body>الكود كامل في المرفقات.
تحيتي
عناوين ذات صلة:
1. "جذب الزائر: فن تصميم الإعلانات المنبثقة"
2. "الترويج الفعّال: كيف تحول الزوار إلى مشتركين؟"
3. "التكيف مع الشاشة: التصميم الاستجابي في عصر الجوال"
4. "من الكود إلى النقرة: بناء إعلان يدفع إلى الفعل"
5. "تجربة المستخدم: تصميم نافذة منبثقة لا تُنسى"