أضافة كود وضع الأكواد داخل تدوينات بلوجر

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

النموذج الأول:

المعاينة

1-توجة الى لوحة التحكم في بلوجر وأختر المظهر
2-من المظهر أختر تحرير HTML
3-قم بالبحث عن كود ]]></b:skin>
4-قم بنسخ ولصق الكود التالي فوق الوسم أو كود ]]></b:skin>

body {
  background:#eee;
  padding:0;
  margin:0;
}

#wrapper {
  padding:5%;
  margin:0 auto;
}

/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
}

5-قم بعملية الحفظ
6-عندما تريد أضافة صندوق أقتباس الأكواد نضع الكود التالي في محرر HTML الموجود في المشاركات.

<div id='wrapper'>
<pre class='code code-html'><label>HTML</label><code>ضع كود html هنا</code></pre>

<pre class='code code-css'><label>CSS</label><code>ضع كود css هنا</code></pre>

<pre class='code code-javascript'><label>JS</label><code>ضع كود Js هنا</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>ضع كود Jquery هنا</code></pre>
<div>
      <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>

    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  
  <script>
      $('i[rel="pre"]').replaceWith(function () {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
    if (window.CP.shouldStopExecution(1)) {
        break;
    }
    pres[i].addEventListener('dblclick', function () {
        var selection = getSelection();
        var range = document.createRange();
        range.selectNodeContents(this);
        selection.removeAllRanges();
        selection.addRange(range);
    }, false);
}
window.CP.exitedLoop(1);
      //@ sourceURL=pen.js
    </script>

    
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>

النموذج الثاني:

يوضع الكود التالي في المكان المخصص له مباشرة,حيث يوضع الكود في محرر HTML الموجود في المشاركات.

<center>
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="تحديد الكل"> </div>
<div align="center">
</div>
<p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">الكود هـنا