للاستفسار او الابلاغ. تواصل معنا على واتساب تلجرام

اضافة صناديق الرسائل التحذرية باستخدام CSS لمدونات بلوجر

تعد صناديق الرسائل التحذيرية أداة هامة للتواصل مع زوار الموقع وتوجيههم.
الرجاء الانتظار 0 ثانية...
مرّر لأسفل وانقر على انتقل إلى الرابط للاستمرار
تهاني! تم إنشاء الرابط
add-warning-message-boxes-using-css
صناديق الرسائل التحذرية

تعد صناديق الرسائل التحذيرية أداة هامة للتواصل مع زوار الموقع وتوجيههم. إذا كنت تستخدم منصة مدونات بلوجر وترغب في إضافة صناديق الرسائل التحذيرية لموقعك، يمكنك استخدام تقنية CSS لتحقيق ذلك بسهولة وجمالية.

معاينة الاضافة:

إشعار: بسبب نقص الأموال ، اضطررنا إلى تشغيل إعلانات لصيانة الموقع. نحن آسفون جدا لهذا الإزعاج!
رسالة: كل شيء على الموقع مجاني. إذا وجدت مقالًا جيدًا وإعلانًا مناسبًا ، فيرجى النقر لدعمنا!
انتباه: إطلاقا لا تنقر فوق البريد العشوائي (انقر فوق إعلان). كن مستخدم إنترنت ذكيًا ومثقفًا! شكرًا لك.

الخطوة الأولى:

قم بإضافة الكود التالي في واجهة التخطيط الخاصة بمدونتك قبل العلامة ]]></b:skin> :

.alert-box {
    color: #555;
    border-radius: 10px;
    font-family: Tajawal, sans-serif;
    font-size: 13px;
    padding: 10px 10px 10px 36px;
    margin: 10px;
}
.alert-box span {
    font-weight: bold;
    text-transform: uppercase;
}
.information_leanhduc {
    background: #e3f7fc url('https://i.imgur.com/RnSpOvJ.png') no-repeat 10px 50%;
    border: 1px solid #8ed9f6;
} 
.success_leanhduc {
    background: #e9ffd9 url('https://i.imgur.com/txjPE8Z.png') no-repeat 10px 50%;
    border: 1px solid #a6ca8a;
}
.error_leanhduc {
    background: #ffecec url('https://i.imgur.com/QzrDQQq.png') no-repeat 10px 50%;
    border: 1px solid #f5aca6;
}

هذا الكود يحدد نمط صناديق الرسائل وأنماط الألوان والخلفيات التي ترغب في استخدامها. يمكنك تعديل القيم حسب تفضيلاتك.

الخطوة الثانية:

قم بإضافة الرمز التالي في المكان الذي ترغب في ظهور صندوق الرسالة التحذيرية:

<div class="alert-box information_leanhduc"><span>إشعار: </span>بسبب نقص الأموال ، اضطررنا إلى تشغيل إعلانات لصيانة الموقع. نحن آسفون جدا لهذا الإزعاج!</div>
<div class="alert-box success_leanhduc"><span>رسالة: </span>كل شيء على الموقع مجاني. إذا وجدت مقالًا جيدًا وإعلانًا مناسبًا ، فيرجى النقر لدعمنا!</div>
<div class="alert-box error_leanhduc"><span>انتباه: </span>إطلاقا لا تنقر فوق البريد العشوائي (انقر فوق إعلان). كن مستخدم إنترنت ذكيًا ومثقفًا! شكرًا لك.</div>

استخدم الكود أعلاه لإنشاء صناديق الرسائل التحذيرية واختر نمط الصندوق الذي تريده عن طريق إضافة فئة النمط إلى العنصر <div>.

بعد استخدام الأكواد المذكورة أعلاه، ستظهر صناديق الرسائل التحذيرية بتنسيق جميل وسهل القراءة على مدونتك في بلوجر. يمكنك تخصيص الألوان والرموز والأنماط حسب رغبتك لتتناسب مع تصميم مدونتك وتحقق تجربة مستخدم ممتازة.

باستخدام هذه التقنية، يمكنك تعزيز تجربة زوار مدونتك وتوجيههم بشكل أفضل. استخدم صناديق الرسائل التحذيرية لإعلام زوارك بأخبار هامة أو توجيههم لاتخاذ إجراء معين.

جميع الحقوق محفوظة ©
www.webwrd.com

إرسال تعليق

ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط للسماح لموقعنا بالعمل بشكل صحيح، لتخصيص المحتوى والإعلانات، ولتوفير ميزات وسائل التواصل الاجتماعي ولتحليل حركة المرور على الموقع.
المعذرة !
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
تم اكتشاف مانع الاعلانات AdBlock!
لقد اكتشفنا أنك تستخدم مانع الإعلانات adblocking في متصفحك.
تُستخدم العائدات التي نحققها من الإعلانات لإدارة موقع الويب هذا ، نطلب منك إدراج موقعنا في القائمة البيضاء في لحظر الإعلانات أو ايقاف تشغيله الى حين تصفح الموقع وشكرا.