كيفية إضافة صندوق عرض أكواد HTML إحترافي على بلوجر

إضافة صندوق عرض أكواد HTML احترافي هو أحد الأمور التي يحتاجها العديد من
مطوري المواقع والمدونين لعرض الأكواد بشكل واضح ومرتب.

يتيح هذا الصندوق للمستخدمين نسخ الأكواد أو الاطلاع عليها دون تشويش، ما
يجعل عملية التعليم أو الشرح أسهل وأكثر وضوحًا.

كيفية إضافة صندوق عرض أكواد HTML إحترافي على بلوجر

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

أهمية صندوق عرض الأكواد الاحترافي

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

صندوق عرض الأكواد الاحترافي يمكنه القيام بالعديد من المهام مثل:

سهولة القراءة: يساعد في تنظيم الأكواد وجعلها قابلة للقراءة بشكل أوضح.
النسخ السهل: يوفر زرًا لنسخ الأكواد بنقرة واحدة.
الحفاظ على التنسيق: يحافظ على تنسيق الأكواد بحيث لا تتداخل مع محتوى
الصفحة.
دعم لغات البرمجة المختلفة: يمكن أن يدعم عرض أكواد متعددة، بما في ذلك
HTML وCSS وJavaScript.

لماذا تحتاج إلى صندوق عرض أكواد HTML احترافي؟

تحسين تجربة المستخدم

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

تحسين محركات البحث (SEO)

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

كيفية إضافة صندوق عرض أكواد HTML احترافي

هنا نأتي الى خطوات إضافة صندوق عرض أكواد HTML الى موقعك بشكل إحترافي ، لكن
عليك تتبع الخطوات التالية :

الخطوة الأولى :

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

اذهب إلى لوحة تحكم بلوجر > المظهر> اضغط على القائمة المنسدلة
بجانب تخصيص > تعديل html

ابحث عن الكود التالي: ]]></b:skin>

لإظهار خانة البحث اضغط في لوحة المفاتيح على Ctrl + F

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

/*-- codebox by jistweb.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;}

الخطوة التانية :

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

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

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

الخطوة الأخيرة :

اضغط على حفظ المظهر

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

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

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

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

رابط مباشر لتحميل الأكواد

تحميل

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

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

في الختام

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

تحياتي .

كيفية إضافة صندوق عرض أكواد HTML إحترافي على بلوجر