اضافه صناديق الرسائل الى مدونه بلوجر

اضافه صناديق الرسائل الى مدونه بلوجر

اضافه صناديق الرسائل الى مدونه بلوجر فمن خلال هذه الصناديق  يمكنك اضافه تحذير او معلومه او رساله نجاح الى مقالك مما يساعد الزائر او تعطيه معلومه لتجنب شيى معين وتظهر هذه الصناديق بشكل واضع وملفت للزائر حتى يستطيع قرائتها ويستخدم هذه الصناديق معظم المدونين فى مقالاتهم كما انها تعطى مظهرا جماليلاً الى مقالك او الى الملحوظه الذى تريد اضافتها وتحتوى هذه الاضافه على صناديق لاضافه رسائل التحذير و الخطا والهديه والمعلومه والنجاح.

وتم تكويد هذه الإضافة بلغتي html وcss وjs ويمكنك معاينة الاضافة من خلال الزر التالي

طريقه اضافه صناديق الرسائل الى مدونه بلوجر

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيار المظهر ثم تعديل html
2.قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اعلى الوسم     
.note {position: relative;padding: 20px 30px 20px 50px;font-size: .85rem;line-height: 1.62em;border-radius: 2px;font-family:tajawal}
.note.info {background-color: #e1f5fe;color: #01579b;}
.note.warning {background-color: #fff3cd;color: #856404;}
.note.error {background-color: #ffdfdf;color: #d17272;}
.note.gift {background-color: #f7dbf6;color: #cf72cb;}
.note.success {background-color: #d4edda;color: #145724;}
.note:before {font-family: 'FontAwesome';position: absolute;right: 12px;bottom: 23px;height: 19px;}
.note.info:before{content:'\f05a'}
.note.warning:before{content:'\f06a'}
.note.error:before{content:'\f071'}
.note.gift:before{content:'\f06b'}
.note.success:before{content:'\f058'}

2.قم بالبحث عن وسم </body> واضف الكود التالى اعلى الوسم
<script crossorigin='anonymous' src='https://kit.fontawesome.com/568d186ba4.js'/>
3.قم بنسخ الكود التالى  واضفه فى صفحه المقال

<p class="note success"><!--هنا محتوى الرساله--></p>
<p class="note info"><!--هنا محتوى الرساله--></p>
<p class="note warning"><!--هنا محتوى الرساله--></p>
<p class="note error"><!--هنا محتوى الرساله--></p>
<p class="note gift"><!--هنا محتوى الرساله--></p>

تحميل الاكواد

massage box.zip 4.14KB

والان نكون قد انتهينا من شرح هذا الموضوع اذا واجهتك مشكله فى تطبيق هذه الخطوات يرجى مراسلتنا عبر التعليقات اونموذج الاتصال

الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

إرسال تعليق