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

بسم الله الرحمن الرحيم حبيت في هذا الموضوع وبعد طلب من بعض الاخوه عن طريقة وضع الاكواد في اقتباس او صندوق ملون وحسب نوع الكود اذا كان 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 الى اخره وثم تضغط على تأليف سوف تظهر لك نقاط تضع بدلها الاكواد التي تريد اضافتها

 <pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre>  

لا تبخل علينا بتعليق بسيط ،، يشجعنا ،، و يمنحك فرصة لاستفادة اكبر :)

لاتتردد بوضع اي استفسار حول الموضوع ضعه في تعليق ويتم الرد عليه في اقرب وقت انشاء الله

دمتم برعاية الله وحفظه

• غرد
• شاركه
• شاركه
• شاركه
• شاركه

azez mohammed

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