إضافة اطار لنص في موضوع للمدونة

السلام عليكم ورحمة الله وبركاته

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

لاتنسى أخذ نسخة إحتياطية للقالب

أولا : إضافة الكود المختصر في القالب

• - من لوحة التحكم توجه إلى "القالب - Template" ثم إضغط على "تحرير Edit HTML - HTML"
  

• - ثم بإستخدام "CTRL + F" إبحث عن الوسم </head> ثم أضف قبله/فوقه الكود التالي :

<meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>


• - ثم حفظ المظهر

ثانيا : فتح مشاركة جديدة

• - ابدأ بكتابة موضوعك

• - ثم إنتقل من وضع تأليف إلى وضع HTML ثم قم بنسخ ولصق كود من الاكواد التالية حسب اختيارك :
  

<div class="w3-panel w3-border"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى</p> </div> <div class="w3-panel w3-light-grey w3-border w3-round"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى</p> </div> <div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى</p> </div> <div class="w3-panel w3-pale-red w3-leftbar w3-rightbar w3-border-red"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى</p> </div> <div class="w3-panel w3-pale-yellow w3-topbar w3-bottombar w3-border-yellow"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى</p> </div> <div class="w3-panel w3-pale-green w3-bottombar w3-border-green w3-border"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى</p> </div> <div class="w3-panel w3-yellow w3-bottombar w3-border-amber"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى</p> </div>


• -استبدل النص الموجود في الكود بنص موضوعك أو بالعنوان

- النتيجة :

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة

• - لتتغير لون الاطار " تغيير كلمات الانجليزية red - green - yellow - brown - black - blue الخ "

• 
  
  مثال :

  هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة

• ×

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