الطريقة الصحيحة لإضافة اكواد Html وCss وJs داخل المشاركات في بلوجر

تضمين الاكواد البرمجية داخل المقالات في بلوجر

كنا قد طرحنا سابقا في مدونة الجعبة التقنية و في قسمها المخصص لإضافات بلوجر شرحا مبسطا و سهلا عن طريقة اضافة صندوق أكواد HTML و تضمينها داخل مشاركات بلوجر و يمكن الرجوع اليها من خلال هذا الرابط للاستفادة منها و تنسيق الاكواد البرمجية CSS و JS داخل التدوينة.
و اليوم سنضع بين ايديكم شرحا جديدا و بسيطا للطريقة الصحيحة التي تمكن المدون من إضافة صندوق اكواد Html وCss وJs داخل المشاركات في بلوجر لتنسيقها و اعطائها شكلا جماليا مميزا وتكون متوافقة مع جميع الاجهزة.

طريقة إضافة صندوق اكواد يدعم جميع لغات البرمجة في بلوجر

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

توجه الى لوحة تحكم بلوجرالمظهر تحرير Html  (خذ نسخة احتياطية تجنبا للخطأ)
❷ ابحث عن الوسم BODY بالضغط على CTRL+F
❸ وضع فوقه هذا الكود

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
ثم قم بالبحث عن هذا الوسم </head> وضع فوقه هذا الكود
    <!-- JU3BA CODBOX THEME 3 -->
    <style type="text/css">
    a,code.prettyprint a,pre.prettyprint a{text-decoration:none}code 
    .str,pre .str{color:#fec243}code .kwd,pre .kwd{color:#8470FF}code .com,pre .com{color:#32cd32;font-style:italic}code 
    .typ,pre .typ{color:#6ecbcc}code .lit,pre .lit{color:#d06}code .pun,pre .pun{color:#8B8970}code .pln,pre .pln{color:#f0f0f0}code 
    .tag,pre .tag{color:#9c9cff}code .htm,pre .htm{color:plum}code .xsl,pre .xsl{color:#d0a0d0}code .atn,pre .atn{color:#46eeee;font-weight:400}code 
    .atv,pre .atv{color:#EEB4B4}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre
    .prettyprint{font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';font-weight:700;font-size:9pt;
    background-color:#0f0f0f;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;
    -ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}
    ol.linenums{margin-top:0;margin-bottom:0;color:#8B8970}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print
    {code.prettyprint,pre.prettyprint{background-color:#fff}code .str,pre .str{color:#088}code .kwd,pre .kwd{color:#006;font-weight:700}
    code .com,pre .com{color:#oc3;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .
    pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#b66ff7;font-weight:700}code .htm,code .xsl,pre 
    .htm,pre .xsl{color:#606;font-weight:700}code .atn,pre .atn{color:#c71585;font-weight:400}code .atv,pre .atv{color:#088;font-weight:400}}</style>
    

    ❺ ثم قم بحفظ القالب

    طريقة استخدام صندوق اكواد HTML

    إذا أردت تضمين اي كود برمجي سواء HTML أو CSS او JS داخل المقالة لتنسيقها و اعطائها شكلا جميلا عليك بوضع هذا الكود داخل القسم المخصص للتدوينة من التبويبHTML كما هو موضح في الصورة
    ❶ ثم تقوم بوضع هذا الكود
      <pre class="prettyprint"><code class="language-html">YOUR CODE HRER</code></pre>

      ❷ وتقوم باستبدال كلمة YOUR CODE HRER بالكود الخاص بك
        أبو حسام الدين
        بواسطة : أبو حسام الدين
        مدون عربي مهتم بجديد تطبيقات وهواتف الأندرويد
        تعليقات



          حجم الخط
          +
          16
          -
          تباعد السطور
          +
          2
          -