تغير مظهر صندوق الاكواد

الكاتب-

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

إذا كنت ترغب في إضافة رمز مربع إلى منشور Blogger الخاص بك ، فما عليك سوى اتباع الخطوات التالية.

كيفية إضافة Code Box في Blogger؟

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

 التالي هو Go To "Theme" ، ثم انقر على أيقونة القائمة المنسدلة بالقرب من خيار "Customize" وانقر على "Edit HTML".

كود البحث  ]]</b:skin>في كود قالب بلوجر 

للحصول على كود البحث: انقر في أي مكان داخل منطقة كود HTML واضغط على مفتاح "Ctrl + F"

]]</b:skin>انسخ رمز CSS أدناه والصق الرمز  أعلاه فقط 

ملاحظة: أعطيك 4 أنماط من مربعات التعليمات البرمجية. اختر الرمز المفضل لديك وانسخ كود CSS الخاص به

النمط 1 (مع Scroll & Simple Design): بالنسبة للنمط أدناه ، انسخ هذا الرمز والصقه فوق ملف]]</b:skin> 

مثال أدناه ↓

كود ↓

.code { background:#1c1b1b; background-repeat:no-repeat; border: double #1c1b1b; border-width: 1px 1px 1px 1px; color: #f9f9f9; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

النمط 2 (باستخدام Scroll & Highlight Design): بالنسبة للنمط أدناه ، انسخ هذا الرمز والصقه فوق ملف  ]]</b:skin> 

تجريبي ↓

كود ↓

.code { background:#000; background-repeat:no-repeat; border: double blue; border-width: 2px 2px 2px 20px; color: #f9f9f9; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

النمط 3 (بدون Scroll & White Backgroud): بالنسبة للنمط أدناه ، انسخ هذا الرمز والصقه فوق ملف  ]]</b:skin> 

مثال أدناه ↓

كود ↓

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

النمط 4 (بدون Scroll & Black Backgroud): بالنسبة للنمط أدناه ، انسخ هذا الرمز والصقه فوق ملف  ]]</b:skin> 

مثال أدناه ↓

كود ↓

.code { background:#191b1f; background-repeat:no-repeat; border: solid #191b1f; border-width: 1px 1px 1px 20px; color: #fff; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

انقر الآن على زر "حفظ النموذج" واحفظه.

الآن تم إنجاز 80٪ من عملك ✅

<! - اجعله مميزًا -> الكود الذي أدرجه في هذه المقالة قابل للتخصيص. لذلك ، يمكنك تخصيصه كما تريد.

 كيف تستخدمه في منشورك؟

لاستخدام مربع الشفرة في منشور المدونة الخاص بك ، ما عليك سوى اتباع الخطوات التالية -

1. أولاً وقبل كل شيء ، افتح منشور مدونة Blogger الذي تريد استخدامه في مربع الشفرة.

2. انقر فوق رمز القلم الرصاص وقم بتبديل طريقة عرض الإنشاء إلى "عرض HTML".

3. الآن ، انسخ الكود أدناه والصقه حيث تريد استخدام مربع الشفرة.

<div class="code"> ضع الكود هنا </div>

الآن استبدلها "ضع الكود هنا" بالرمز الذي تريده.

موقع عصر المعرفة

تقيمك للموضوع!