تلوين الاكواد واضاقتها في اقتباس حسب نوع الكود V1

بسم الله الرحمن الرحيم  في هذا الموضوع ن طريقة وضع الاكواد في اقتباس او صندوق ملون وحسب نوع الكود اذا كان css او html قررت ان اضع موضوع عن هذا الاضافة الرائعة التي تستطيع ان تضع الاكواد في داخل الصندوق حسب نوع الكود الذي تريد ان تضيفه وهذا الموضوع يفيد اصحاب المواقع الذين يقدمون مواضيع تخص مجال بلوجر ويضيف لمسة من الجمال للموضوع

طريقة اضافة الاقتباس او الصندوق لمدونتك اثناء كتابة الموضوع

1- من لوحة التحكم >> قالب >> تحرير HTML

2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير

3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

4- قم بالبحث عن الكود ]]></b:skin> واضف فوقه مباشراً الكود التالي

   pre {
    background-color:#233948;
    font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    color:#333;
    border:1px solid #f1c40f;
    position:relative;
    padding:0 7px;
    margin:10px 0;
    overflow:auto;
    word-wrap:normal;
    white-space:pre;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    position:relative;
}

pre[data-codetype] {
    padding:23px 1em 7px 1em;
}

pre[data-codetype]:before {
    content:attr(data-codetype);
    display:block;
    position:absolute;
    top:0;
    right:0;
    left:0;
    background-color:#95a5a6;
    padding:0 7px;
    font:bold 12px/20px Arial,Sans-Serif;
    color:white;
}

pre[data-codetype="HTML"]       {border-color:#27ae60;color:#8FE6B3;}
pre[data-codetype="CSS"]        {border-color:#16a085;color:#7DDECA;}
pre[data-codetype="JavaScript"] {border-color:#2980b9;color:#91C8ED;}
pre[data-codetype="JQuery"]     {border-color:#34495e;color:#889CAF;}


pre[data-codetype="HTML"]:before          {background-color:#27ae60;}
pre[data-codetype="CSS"]:before           {background-color:#16a085;}
pre[data-codetype="JavaScript"]:before    {background-color:#2980b9;}
pre[data-codetype="JQuery"]:before        {background-color:#34495e;}


pre code,
pre .line-number {
  display:block;
  font:normal normal 12px/15px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color:#006699;
}

pre .line-number {
  float:right;
  margin:0 -1em 0 0em;
  color:#ecf0f1;
  background-color:#243342;
  border-left:2px solid #3E5770;
  text-align:right;
  min-width:2.5em;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .line-number span:nth-child(even) {background-color:#243342}

pre .cl {
  display:block;
  clear:both;
} 

5- نبحث عن الكود </body> ونضيف فوقه مباشرأ الكود التالي

  <script type='text/javascript'>
(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j < num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j+1) + '</span>';
        }
    }
})();
</script> 

والان قم بالضغط على حفظ القالب وعندما تريد اضافة الاقتباس او الصندوق تضع الصفحة html ثم تضيف احد الاكواد التالي حسب نوع الكود الذي تريد ان تضيفه اذا كان css او html الى اخره وثم تضغط على تأليف سوف تظهر لك نقاط تضع بدلها الاكواد التي تريد اضافتها

الصندوق الخاص بلغه Html

الكود

 <pre data-codetype="HTML"> ... </pre>

الصندوق الخاص بلغه CSS

الكود

<pre data-codetype="CSS"> ... </pre>

الصندوق الخاص بلغه JavaScript

الكود

<pre data-codetype="JavaScript"> ... </pre>

الصندوق الخاص بلغه JQuery (جي كيوري)

الكود

<pre data-codetype="JQuery"> ... </pre>