كيفية اضافة صندوق عرض الاكواد على بلوجر

اقدم  لكم شرح طريقة وضع الاكواد و النصوص داخل اطار Box Code داخل مواضيع بلوجر بمعني إذا كان لديك مقال أو موضوع تود إدراج كود برمجي في بلوجر داخله فالأفضل أستخدام هذا الصندوق لعرض الأكواد في بلوجر هو كود بوسم "<pre>" يقوم بعرض الأكواد البرمجية واكواد HTML  كما أنه يعطي جمالاً لمظهر مقالاتك .

شرح طريقة تركيب صندوق عرض الاكواد فى بلوجر بكشل جديد

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

شرح اضافة صندوق عرض الاكواد فى بلوجر بشكل جديد لعرض الاكواد داخل المشاركات بزر نسخ للتسهيل على الزائر لنسخ الكود بسهولة.

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

شرح كيفية إضافة صندوق عرض الأكواد مع زر النسخ 

قبل تعديل أي شيء في القالب قم بأخذ نسخة احتياطية لقالب بلوجر الخاص بك اذا احتجت للرجوع اليها مره اخرى

1- اذهب إلى لوحة تحكم بلوجر > المظهر> اضغط على القائمة المنسدلة بجانب تخصيص > تعديل html
لإظهار خانة البحث اضغط في لوحة المفاتيح على Ctrl + F لاضافة الكود التالي
2- ابحث عن الكود التالي: ]]></b:skin>
3- فوقه مباشرة قم بلصق الكود التالي:

/*-- codebox by kzafkra.com --*/
.code-box{border:1px solid #ccc;border-radius:4px;padding:16px;position:relative;margin:10px 0;}
.code-box pre{background-color:#f8f8f8;border:0;margin:0;overflow:auto;padding:16px}
.copy-button{background-color:#6cc060;border:0;border-radius:2px;color:#fff;cursor:pointer;font-size:12px;outline:0;padding:5px 13px;position:absolute;right:16px;top:16px;transition:background-color .2s}
.copy-button:hover{background-color:#5ca751}
.post-body pre, pre.code-box {direction: ltr;display: block;background-color: #9b9b9b0d;font-family: Monospace;font-size: 13px;color: #444444;white-space: pre-wrap;line-height: 1.4em;padding: 20px;border: 1px solid #9b9b9b1a;border-radius: 5px;}

4- ابحث عن الكود التالي: </body>

5- فوقه مباشرة قم بلصق الكود التالي:

<script type='text/javascript'>
//<![CDATA[
const codeBoxes=document.querySelectorAll(".code-box");codeBoxes.forEach(t=>{const e=t.querySelector(".copy-button");e.addEventListener("click",()=>{var e=t.querySelector("code");const o=window.getSelection(),c=document.createRange();c.selectNodeContents(e),o.removeAllRanges(),o.addRange(c),document.execCommand("copy"),o.removeAllRanges()})});   
//]]></script>

6- اضغط على حفظ المظهر
7- انتهينا من الجزء الأول، الآن توجه إلى المقالة التي تريد عرض الكود فيها قم اضغط على ايقونة القلم الموجودة على اعلى اليمين وانقر على عرض html

اختر المكان الذي تريد عرض الكود فيه والصق الكود التالي:

<div class="code-box">
<pre><code>
  <!--  ضع الكود الذي تريد عرضه هنا بعد تحويله-->
</code></pre>
  <button class="copy-button">نسخ</button>
</div>

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

تعديل المقال