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

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

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

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

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

❶ توجه الى لوحة تحكم بلوجر☜المظهر☜ تحرير Html  (خذ نسخة احتياطية تجنبا للخطأ)

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

<!-- 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

<pre class="prettyprint"><code class="language-html">YOUR CODE HRER</code></pre>