القائمة الرئيسية

الصفحات

أحدث المقالات

طريقة إضافة صندوق الأكواد داخل مواضيع بلوجر - blogger code box

طريقة إضافة صندوق أكواد بسيط داخل مواضيع بلوجر 

Adding a simple code box in blogger postes

طريقة إضافة صندوق أكواد بسيط داخل مواضيع بلوجر


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

 شرحنا اليوم عن طريقة إضافة صندوق أكواد أو تضمين كود برمجي ضمن موضوع بلوجر سهلة وبسيطة يستطيع الكل إن شاء الله إتقانها وتعلمها .. 

لماذا نحتاج هذا الصندوق ؟؟ 
نحتاج هاذ الصندوق لتضمين الأكواد البرمجبية كأكواد html وcss وjs. بصورة منمقة و مؤطرة ضمن إجار ليسهل فهمها و تكون واضحة وكذالك ليسهل تحديدها و نسخها أيضاً. وكذالك حتى لا نقع بمشاكل أثناء كتابة الموضوع ..
وليسهل على الزائر أو المتعلم فهم ما هية الشرح .

نأتي الآن إلى الطريقة وهي كالتالي : 

أولاً : إذهب إلى لوحة التحكم في مدونتك على بلوجر >> ومن القائمة على اليمين نختار التبويب  المظهر >> ومن ثم تخصيص

ثانياً : نختار  متقدم >> ومن ثم إضافة css .
نقوم بلصق الكود التالي ضمن مربع الإعداد ..




.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; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }


ثالثاً :  نقوم بحفظ الإعداد عن طريق الضغط على زر > تطبيق على المدونة  واللي موجود أعلى الصفحة

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


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

ومن ثم نقوم بحفظ المشارك او نشرها  ..


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

تعليقات

} });