إضافة رسائل التنبية لمنصة بلوجر النسخة الأولي ... حصري
إضافة رسائل التنبية لمنصة بلوجر النسخة الأولي ... حصري
مقدمة :
مرحباً بكم زوار مدونة
اوما ثك - Aoma Tech , فى هذا الشرح سأشرح لكم عن رسائل التنبية الاضافة غنية عن التعريف فالكل يعرفها إما رأها في مدونتي او مواقع اخرى يستخدمونها في المواضيع للسكربت مميزات فهو يشد انتباه الزائر للانتباه للملاحظات والتنبيهات وغيرها .
معاينة الإضافة :
يمكنك الأن معاينة الاضافة على احدي مدوناتنا التجريبية الذي نجرب عليها الاضافات ونقدمها لك بشكل جميل ومميز
فيمكنك الأن معاينة الاضافة من هنا.
شرح طريقة التركيب :
سنعرض عليكم مجموعة من الاكواد التي يمكنك استخدامها فى مدونتك او موقعك
- أولاً نتوجة إلي لوحة التحكم الخاصة ببلوجر من هنا .
- وبعد ذلك نتجة إلي المظهر ثم تعديل html بعدها قم بالبحث عن ]]></b:skin>
- ثم قم الكود التالي فوقة مباشر .
.alert-message{margin:10px 0;position:relative;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;padding:15px;border-radius:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
.alert-message .text{margin-right:15px;position:relative}
.alert-message.alert-success{background:#4caf50}
.alert-message.alert-info{background:#2196f3}
.alert-message.alert-warning{color:#323232;background:#ffc107}
.alert-message.alert-error{background:#ff5252}بعد ذلك سنعرض لك اسم الرسالة والكود التابع لها .
تنبية المعلومة
<div class="alert-message alert-info short-b"><svg width="24" height="24" viewBox="0 0 24 24" style="fill: #ffffff;flex: 0 0 auto;"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg><div class="text">مثال لتنبيه المعلومة :لوريم ايبسوم هو نموذج افتراضي يوضع في التصاميم لتعرض على العميل ليتصور طريقه وضع النصوص بالتصاميم سواء كانت تصاميم مطبوعه </div></div>تنبيه التحذير
<div class="alert-message alert-warning short-b"><svg width="24" height="24" viewBox="0 0 24 24" style="fill: #ffffff;flex: 0 0 auto;"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"></path></svg><div class="text">مثال لتنبيه التحذير :لوريم ايبسوم هو نموذج افتراضي يوضع في التصاميم لتعرض على العميل ليتصور طريقه وضع النصوص بالتصاميم سواء كانت تصاميم مطبوعه </div></div>تنبيه الخطأ
<div class="alert-message alert-error short-b"><svg width="24" height="24" viewBox="0 0 24 24" style="fill: #ffffff;flex: 0 0 auto;"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></svg><div class="text">مثال لتنبيه الخطأ :لوريم ايبسوم هو نموذج افتراضي يوضع في التصاميم لتعرض على العميل ليتصور طريقه وضع النصوص بالتصاميم سواء كانت تصاميم مطبوعه </div></div>تنبيه النجاح
<div class="alert-message alert-success short-b"><svg width="24" height="24" viewBox="0 0 24 24" style="fill: #ffffff;flex: 0 0 auto;"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"></path></svg><div class="text">مثال لتنبيه النجاح :لوريم ايبسوم هو نموذج افتراضي يوضع في التصاميم لتعرض على العميل ليتصور طريقه وضع النصوص بالتصاميم سواء كانت تصاميم مطبوعه </div></div>إلي هنا نكون قد انتهينا لاتنس متابعة المدونة من هنا للحصول على أهم إضافات وقوالب بلوجر .