نبدأ بالسلام عليكم ورحمة الله
وكما تحدثنا في موضوع سابق عن طريقة وضع الأكواد في مدونة بلوجر
سأطرح عليكم اليوم هاك مميز جدآ ليجعلها تظهر بهذا الشكل كما في مدونتي
هنا سيتم عرض الكود ليتميز عن باقي محتوى الموضوع
وكما تحدثنا في موضوع سابق عن طريقة وضع الأكواد في مدونة بلوجر
سأطرح عليكم اليوم هاك مميز جدآ ليجعلها تظهر بهذا الشكل كما في مدونتي
هنا سيتم عرض الكود ليتميز عن باقي محتوى الموضوع
وكما تعلمنا من لوحة التحكم توجه إلى التخطيط + تحرير HTML
ثم في خانة نسخ احتياطي / استعادة القالب اضغط على ( تنزيل قالب كامل ) ، ثم قم بتحميل الملف على جهازك الخاص ، هذه الخطوه مهمه جدآ في حاله حدوث خطأ ما ، حيث يمكنك بعد ذلك استرجاع قالبك ببساطة ، ويرجى تطبيق هذه الخطوه عند أي تغيير تحدثه في أكواد القالب ..
من تصميم + تحرير HTML
اضغط على ( توسيع قوالب عناصر واجهة المستخدم )
وللبحث السريع يتم الضغط على ctrl+f ثم نسخ الكود ولصقه في مربع البحث وسيظهر لك مكانه في القالب ..
ابحث عن هذا الكود ]]></b:skin>
والصق هذا الكود فوقه مباشرة
تستطيع أن تتحكم في لون الخلفية من خلال background-color: #f3f3f3
ثم قم بحفظ القالب ..
ثانيآ : عند كتابة موضوع جديد يحتوي على أكواد تريد عرضها بهذا الشكل
كل ما عليك فعله هو كتابة الكود داخل هذين الوسمين
وعند نشر الرسالة سيظر الكود في الإطار كما بالشكل السابق ..
وبهذا نكون قد انتهينا .. أرجو أن تنال إعجابكم ^_^
ثم في خانة نسخ احتياطي / استعادة القالب اضغط على ( تنزيل قالب كامل ) ، ثم قم بتحميل الملف على جهازك الخاص ، هذه الخطوه مهمه جدآ في حاله حدوث خطأ ما ، حيث يمكنك بعد ذلك استرجاع قالبك ببساطة ، ويرجى تطبيق هذه الخطوه عند أي تغيير تحدثه في أكواد القالب ..

اضغط على ( توسيع قوالب عناصر واجهة المستخدم )
وللبحث السريع يتم الضغط على ctrl+f ثم نسخ الكود ولصقه في مربع البحث وسيظهر لك مكانه في القالب ..
ابحث عن هذا الكود ]]></b:skin>
والصق هذا الكود فوقه مباشرة
.code {
padding: 10px;
margin : 5px 5px 5px 5px;
border:1px dashed #006699;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 7px;
border-top-left-radius: 0px;
border-top-right-radius: 7px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 7px;background-color: #f3f3f3;
direction: ltr;
text-align: left;
clear : both;
}
padding: 10px;
margin : 5px 5px 5px 5px;
border:1px dashed #006699;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 7px;
border-top-left-radius: 0px;
border-top-right-radius: 7px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 7px;background-color: #f3f3f3;
direction: ltr;
text-align: left;
clear : both;
}
تستطيع أن تتحكم في لون الخلفية من خلال background-color: #f3f3f3
ثم قم بحفظ القالب ..

كل ما عليك فعله هو كتابة الكود داخل هذين الوسمين
<div id="code">
ضع هنا الكود المراد عرضه
</div>
وبهذا نكون قد انتهينا .. أرجو أن تنال إعجابكم ^_^