اضافة صندوق عرض الاكواد في مواضيع بلوجر بشكل احترافي وجديد

صندوق عرض الاكواد عبارة عن اداة تقوم بعرض الاكواد البرمجية بشكل منسق داخل المشاركات والمواضيع على بلوجر، فكثيرا مانود ان نقوم بعرض كود معين للشروحات خصوصا للمدونات التثنية فتحتاج الى ان تتوفر على صندوق يقوم بعرض الاكواد.

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

اضافة صندوق عرض الاكواد في مواضيع بلوجر بشكل احترافي وجديد

شرح طريقة تركيب صندوق عرض الاكواد على بلوجر

قبل كل شيء قم بعمل نسخة احتياطية لقالبك الحالي

لتبسيط الشرح سنقوم بتقسيم الشرح الى جزئين أساسيين:

الجزء الاول:

أولا تقوم باتباع الخطوات التالية :

  1. التوجه الى واجهة تحكم بلوجر
  2. الذهاب الى قسم المظهر
  3. الضغط على قائمة منسدلة بجانب التخصيص
  4. الضغط على تعديل html
  5. الآن تضغط في اي مكان داخل الاكواد
  6. في لوحة المفاتيح تضغط على Ctrl + F

تظهر لك خانة البحث وتقوم بلصق الكود التالي

]]></b:skin>

تضغط على Enter فوق الكود السابق (b:skin) تقوم بلصق الكود التالي :


pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2B303B;position:relative;max-height:500px;text-align:left;direction:ltr;}
pre::after{content:'اضغط مرتين للنسخ';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#ffffff;line-height:20px;background: red;font-family: 'Tajawal';}
pre:hover::after{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:-8px;visibility:visible;}
pre code{display:block;background:none;border:none;color:#C0C5CE;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold;font:14px 'Consolas','Monaco',monospace,Courier,Courier New;}
pre code .token.prolog{color:#b1b1b1;}
pre code .token.doctype{color:#b1b1b1;}
pre code .token.cdata{color:#b1b1b1;}
pre code .token.url{color:#ccc;}
pre .language-css .token.string{color:#ccc;}
pre .style .token.string{color:#ccc;}
pre code .token.atrule{color:#009999;}
pre code .token.atrule{color:#1baeb0;}
pre code .token.regex{color:#ccc;}
pre code .token.important{font-weight:bold;}
pre code .token.entity{color:#759bb9;cursor:help;}
pre code .namespace{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";filter:alpha(opacity=0.8);opacity:.8;}
pre code .token.tag,.language-markup .token.punctuation{color:#A3BE8C;}
pre code .token.attr-name{color:#C0C5CE;}
pre code .token.selector{color:#759bb9;}
pre code .token.property{color:#759bb9;}
pre code .token.comment{color:#8c919a;font-style:italic;}
pre code .token.punctuation{color:#8FA1B3;}
pre code .token.operator{color:#4d9bd8;}
pre code .token.number,pre code .token.boolean{color:#cec768;}
pre code .token.attr-value{color:#f79029;}
pre code .token.string{color:#A3BE8C;}
pre code .token.keyword{color:#94719c;font-style:italic;}
code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;}
pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;}
/*======comments pre======*/
.comments pre{padding:10px 10px 15px 10px;background:#2c323c;}
.comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border:none;}
.comments pre::after{font-size:11px;}
.comments pre code{color:#eee;}
.comments pre.line-numbers{padding-left:10px;}
/*=======line numbers========*/
pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers > code{position:relative;}
.line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0;}
.line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype='HTMLku']:before{color:#f79029;}
pre[data-codetype='CSSku']:before{color:#759bb9;}
pre[data-codetype='JavaScriptku']:before{color:#d4b447;}
pre[data-codetype='JQueryku']:before{color:#94719c;}
/*=======transition=======*/
pre::after{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
/*=======border radius=======*/
pre,.comments pre::before{border-radius:4px;-o-border-radius:4px;-ms-border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}

تتوجه الى خانة البحث مرة اخرى وتبحث عن الكود التالي  :

</body>

تضغط على Enter وفوق الكود السابق وسم اغلاق Body  تقوم بلصق الكود التالي : لتحميل الكواد من هنا

الجزء الثاني :

الآن نأتي الى المقالة الذي تريد أن تقوم بعرض الاكواد فيه وشرح كيف تقوم بعرضها بسهولة فاتبع الخطوات جيدا.

أولا تقوم بتحويل الكود الذي تريد عرضه باستخدام محول الاكواد

بعد تحويل الكود تقوم بوضعه داخل هذا الكود في المكان المخصص له :


<pre><code class="language-markup">
<!--ضع الاكواد بعد تحويلها هنا-->
</code></pre>

بعد أن تضع الكود المحول داخل هذا الكود تقوم بنسخ جميع الأكواد وتتوجه الى واجهة كتابة المقالة.

تضغط على القلم الموجود على اليمين وتختار عرض html  وتقوم بلصق الكود كاملا في المكان المناسب لك حسب الشرح.

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

ملاحظة : الجزء الأول تقوم به مرة واحدة فقط أما الجزء الثاني فتقوم به كلما تحتاج لوضع الاكواد داخل المقالة.

تم والحمد لله رب العاليمين، ولاتنسونا من حسن دعائكم لنا ولوالدينا ولكم ولجميع المسلمين الاحياء منهم والاموات.

المحترف

كثير من الفشل فى الحياة جاء لأشخاص توقفوا عندما لم يعلموا كم كانوا قربين من النجاح.

إرسال تعليق

أحدث أقدم
Youtube Channel Image
جيست ويب اشترك في قناتنا على اليوتيوب
Subscribe