بلوجر: طريقة إدراج أكواد الHTML و JAVASCRIPTE في مواضيع بلوجر

السلام عليكم.

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

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

الطريقة سهلة، فقط قليل من التركيز و متابعة الشرح خطوة بخطوة.

I.إضافة الخاصية إلى مدونتك: (مرة واحدة فقط)

1.توجه إلى Template ثم Edit Html

2.إبحث عن الوسم:

]]></b:skin>

3.قم بنسخ الكود التالي و ألصقه قبل الوسم السابق مباشرة

/*--Code View--------------*/
code {
color: #000099;
font: 108% "Courier new",Courier,mono;
padding: 0 2px;
white-space: nowrap;
}
pre code {
-moz-box-shadow: 0 0 10px #DDDDDD;
background: url("http://im85.gulfup.com/sMdHxn.png") repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
clear: both;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 85% !important;
word-wrap: break-word;
}
code .comment {
color: #888;
}
code .class, code .rules {
color: #ff00ff;
font-size: 100%;
}
code .value,  code .title, code .string {
color: #0000FF;
}
code .tag {
color: #000099;
}
code .keyword {
color: #000099;
}
.html .attribute {
color: #006600;
}

4.قم بحفظ القالب.
ملاحظة: لك الخيار في الحفاظ أو تغيير الخلفية و الإطار بتغيير ما هو بالألوان.
الرابط: رابط صورة الخلفية، كما يمكنك وضع لون مكان الصورة كالآتي:

background: #F1F1F1;

الإطار: سمك، شكل و لون الإطار.

II.تطبيق الخاصية عند كتابة المواضيع (تتكرر عند كتابة كل موضوع)

لكي يظهر الكود كما هو موضح في الصورة في الأعلى يجب عليك:

عند كتابة موضوع جديد:

1.يجب تحويل الكود الذي تريد إظهاره_يمكنك تحويله من هنا

2.بعد تحويل الكود، قم بإضافة الوسمين قبل و بعد الكود:

قبل الكود: <pre><code>

بعد الكود: </pre></code>

3.عند كتابة موضوع جديد دائما، قم بالضغط على الزر HTML، قم بنسخ الكود الذي تحصلت عليه من المرحلتين السابقتين 1و2 و ألصقه في المكان الذي تريده، كما في الصورة التالية:

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