اختصار روابط

 بالطبع! في هذا المقال، سأشرح لك كيفية إضافة صندوق عرض الأكواد (Code Box) بشكل احترافي في مدونتك على Blogger. يعتبر صندوق عرض الأكواد أمرًا ضروريًا للمدونات التقنية والمواقع التي تهتم بالبرمجة والتطوير. يساعد الزوار على رؤية الشفرات المصدرية بشكل منظم ويسهل عليهم نسخها للاستفادة منها أو تطبيقها في مشاريعهم الخاصة.

ما هو صندوق عرض الأكواد؟

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

كيفية إضافة صندوق عرض الأكواد إلى مدونتك على Blogger:

1. اذهب إلى لوحة التحكم في Blogger.
2. انتقل إلى “المظهر” واضغط على “تعديل HTML”.
3. ابحث عن الكود التالي:

   ]]></b:skin>
   

4. قم بلصق الكود التالي بعد الكود السابق:

   /*-- 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;
   }
   

5. ابحث عن الكود التالي:

   </body>
   

6. قم بلصق الكود التالي قبل الكود السابق:

   <script type='text/javascript'>
       const codeBoxes = document.querySelectorAll(".code-box");
       codeBoxes.forEach(box => {
           const copyButton = box.querySelector(".copy-button");
           copyButton.addEventListener("click", () => {
               const code = box.querySelector("code");
               const selection = window.getSelection();
               const range = document.createRange();
               range.selectNodeContents(code);
               selection.removeAllRanges();
               selection.addRange(range);
               document.execCommand("copy");
               selection.removeAllRanges();
           });
       });
   </script>
   

7. احفظ التغييرات.

الآن يمكن لزوار مدونتك نسخ الأكواد بسهولة من صندوق العرض الجديد ال