هاك عرض كود على مدونات بلوجر Blogger

بسم الله و الحمد لله و الصلاة و السلام على أشرف خلق الله محمد الصادق الأمين.

انطلاقا من تدوينة الأخ محمد رياس ، هاكم طريقة وضع هاك الكود على المدونات.
مثال:

هنا يدرج كود css أو سكريبت و غيره من الأكواد المعروفة،
حتى تمتاز عن باقي محتوى الرسالة.

و هذا مثال لعرض كود css

font-size : 13px;
line-height : 24px;
font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;
2

»»» قبل تحرير القالب يجب حفظ نسخة احتياطية منه لاستعادتها عند الضرورة.
»»» بعض الأكواد عرضتها كصورة لأنها تختفي في مدونة بلوغر لذا وجب كتابتها و هذا أفضل!
كما جرت العادة ندخل إلى لوحة تحكم مدونتنا ثم نضغط " تخطيط " بعده " تحرير Html " و نبحث (Ctrl+F لفتح نافدة البحث في المتصفح) على الكود :

و قبله أي فوقه مباشرة نضيف كود css الآتي :

i
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmCArD5SysxObKSxKXMo8ex3fVJw0lCZgoK2xvvYPdVHBbXqrt5gV-5BEULO2wNdIZfBkB7qLCtRZRRQqcQStCXjIXBFxlxfzdHICWQsEanzvSF0nyAjSYBDmU09Qj5qq1dLaPOABAQk/) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

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

» ثانيا : عند كتابة رسالة جديدة ، ندخل الكود المراد عرضه بين وسمي div كما يلي ...

وعند نشر الرسالة يظهر الكود في إطار كما في المثال المدرج في بداية الصفحة.