اضافة رسائل التنبيه و التحذير و الملاحظات المطوية على بلوجر

طريقة إضافة رسائل التنبيه و الملاحظات في بلوجر

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

لماذا نستعمل رسائل التنبيه و الملاحظات و التحذير داخل مقال بلوجر

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

معاينة النتيجة النهائية للاضافة

See the Pen Untitled by الجعبة التقنية (@ju3ba-the-scripter) on CodePen.

طريقة تركيب خاصية الملاحظات و رسائل التنبيه في بلوجر

• قم بالدخول الى تحرير قالبك إضغط على Ctrl + F
  وإبحث عن  هذا الوسم ]]></b:skin>
• وأضف هذا الكود فوقه مباشرة

.note{position:relative;width:30%;text-align: right;padding:1.2em
1.5em;margin:2em
auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0
16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60
#27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px
1px 1px rgba(0,0,0,0.2);display:block;width:0}

  .note.orange:before{border-color:#fff #fff #e67e22
#e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45
#de6e45;background:#de6e45}

.note.river:before{border-color:#fff #fff #2980b9
#2980b9;background:#2980b9}

• ثم قم بحفظ القالب

طريقة تنفيذ خاصية التنبيهات و الملاحظات المطوية داخل المقال

<div class='note'>هذا النص هو باللون الأخضر و مثال لنص يمكن
أن يستبدل في نفس المساحة...</div>

<div class='note orange'> هذا النص باللون البرتقالي وهو مثال
لنص يمكن أن يستبدل في نفس المساحة...</div>

<div class='note river'>هذا النص باللون الأزرق وهو مثال لنص
يمكن أن يستبدل في نفس المساحة...</div>

<div class='note crusta'
هذا النص باللون الأحمروهو مثال لنص يمكن أن يستبدل في نفس
المساحة...</div>

الملاحظة بها الكثير من الألوان وكل ما عليك فعله هو إختيار اللون المناسب والمتناسق مع قالبك ووضعها داخل المشاركة في وضع html

تعديل المقال