أخر الاخبار

إضافة مربع عرض التعليمات البرمجية (الاكــــواد) إلى مدونة بلوجـــــر


كيفية إضافة مربع كود على المدونة بطريقة مميزة ومهنية، كما يمكنك تعديله من حيث الألوان والتنسيق ليناسب موقعك أو مدونتك.


عرض التعليمات البرمجية


مربع عرض الكود هو أداة تعرض رموز البرامج بطريقة منسقة ضمن المشاركات والموضوعات على المدون، غالبا ما نرغب في عرض رمز معين للتفسيرات، خاصة للمدونات الفنية.


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


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


قبل كل شيء إجراء نسخة احتياطية من القالب الحالي.


 سنقسم الشرح إلى قسمين رئيسين


الجزء الأول من شرح إضافة مربع الرمز- الاكواد:


 أولا عليك اتباع الخطوات التالية :


  •  انتقل إلى واجهة التحكم في المدونة.
  •  انتقل إلى قسم المظهر.
  •  انقر على القائمة المنسدلة بجوار التخصيص الضغط على تحرير HTML.
  •  الآن النقر فوق أي مكان داخل رموز على لوحة المفاتيح تضغط على    CNTRL+ F.
  • و يظهر مربع البحث ولصق التعليمة البرمجية التالية:
<head>
ثم نلصق الكود التالي

تتوجه الى مربع السيرش مرة اخرى وتبحث عن الكود التالي  :



b:skin/><][

تضغط على Enter فوق الكود السابق (b:skin)  نلصق الكود التالي :

وهذا هو كود CSS الخاص بهذا الصندوق:

الجزء الثاني من شرح إضافة مربع الرمز الكود:


نأتي الآن إلى المقالة التي تريد عرض الرموز فيها وشرح كيفية عرضها بسهولة، اتبع الخطوات جيدا.


أولا ، تقوم بتحويل الرمز الذي تريد عرضه باستخدام محول الاكواد.


بعد تحويل الرمز، يمكنك وضعه داخل هذا الرمز في المكان المخصص له يمكنك التحويل من محول الاكواد اضغط هنا

<!-- <div class="codeBlockCopy" >
<form>
<textarea dir="ltr" id="mytext" rows="5">
Your code here
</textarea>
</form>
<button onclick="document.getElementById('mytext').select();
document.execCommand('copy');">نسخ الكل <i class="fa fa-copy"></i></button>
</div> -->

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


النقر على القلم على اليمين، واختيار عرض html ولصق رمز كامل في مكان مناسب بالنسبة لك وفقا للتفسير.


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


لماذا يجب تحويل الكود قبل عرضه في المقالة

إذا لم تقم بتحويل الرمز، فلن يتم تشغيل الرمز.


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

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


تعليقات