طريقة إضافة كود في خلفية مربع نصي داخل مقال بلوجر

خطوات سهلة لإضافة كود داخل مشاركة بلوجر باستخدام مربع نصي

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

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

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

سنستعرض الخطوات اللازمة لضمان تنفيذ العملية بسلاسة، بالإضافة إلى بعض النصائح لضمان تحقيق أفضل النتائج.

خطوات إضافة كود في مربع نصي داخل مقالة بلوجر

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

وضع كود HTML داخل قالب بلوجر

الطريقة سهلة تحتوي على كودين مهمين: كود داخل قالب المدونة وكود داخل المقالة أو المشاركة.

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

أولاً: خطوات إضافة كود التصميم داخل القالب

1. انتقل إلى لوحة تحكم مدونتك ثم المظهر، ومن القائمة المنسدلة انقر على تعديل HTML.
2. اضغط في لوحة المفاتيح على Ctrl + F وابحث عن الكود: <![CDATA[]]></b:skin>.
3. ضع الكود الخاص بالتصميم التالي فوق علامة <![CDATA[]]></b:skin>:
4. الكود المستخدم في القالب HTML.

   pre{white-space:pre-wrap;padding:10px;margin:10px;font-size:14px;line-height:1.5;background:rgba(27,27,27,0.91);border-left:10px solid #000;color:#cfcfa7;} mark{background-color:#4c0b0b;color:#fff;padding:2px 5px;border-radius:2px}

5. واضغط حفظ لحفظ التغييرات على القالب.
6. مثال على مكان وضع الكود في القالب:
   

ثانياً: طريقة إضافة الكود في المقالة

عند إنشاء مشاركة جديدة، ما عليك سوى وضع الكود في المكان المخصص لظهور صندوق الكود داخل المقال.

1. بداخل المقال، اضغط على زر القلم (الأدوات) في الزاوية.
2. وقم بتغيير الوضع إلى "عرض HTML".
3. مثال على تغيير وضع العرض:
   

4. قم بوضع الكودين التاليين في المكان الذي تريد أن يظهر فيه صندوق الكود وبداخله الكود الذي تريد عرضه:

5. 
   <pre><code>
   هنا كود المحتوى الذي تريده ان يظهر.
   الكود الثاني:- 
   </code></pre>

إضافة مقتطفات من الأكواد في مقالاتك تجعل المحتوى أكثر احترافية وفائدة للقارئ الذي يبحث عن حلول برمجية.

مدون تقني

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

طريقة مبسطة لإنشاء صندوق الكود مع زر النسخ

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

1. أضف الكود التالي كاملاً في المكان الذي تريد أن يظهر فيه صندوق الكود في مقالتك (في وضع عرض HTML).
2. قم بوضع الكود الخاص بك في المكان المشار إليه داخل الوسم <code id="code-block">.

   <div class="code-box">
       <pre><code id="code-block">
           // اكتب الكود الذي تريد عرضه هنا
           console.log('Hello, world!');
       </code></pre>
       <button class="copy-btn" onclick="copyCode()">نسخ الكود</button>
   </div>
   
   <style>
   .code-box {
       position: relative;
       background-color: #2d2d2d;
       border: 1px solid #444;
       padding: 10px;
       border-radius: 5px;
       margin: 20px 0;
       color: #f8f8f2;
       font-family: 'Courier New', Courier, monospace;
   }
   
   .code-box pre {
       margin: 0;
       overflow-x: auto;
       white-space: pre-wrap;
       word-wrap: break-word;
   }
   
   .code-box code {
       color: #f8f8f2;
   }
   
   .code-box button.copy-btn {
       position: absolute;
       top: 10px;
       right: 10px;
       background-color: #50fa7b;
       color: #282a36;
       border: none;
       padding: 5px 10px;
       border-radius: 3px;
       cursor: pointer;
       font-size: 14px;
   }
   
   .code-box button.copy-btn:hover {
       background-color: #45e076;
   }
   
   .code-box button.copy-btn:active {
       background-color: #40d971;
   }
   </style>
   
   <script>
   function copyCode() {
       var code = document.getElementById('code-block').innerText;
       navigator.clipboard.writeText(code).then(function() {
           alert('تم نسخ الكود إلى الحافظة');
       }, function(err) {
           console.error('حدث خطأ أثناء نسخ الكود: ', err);
       });
   }
   </script>
   

ضع الكود بعد الانتهاء من كتابة المقال بالكامل لتجنب مشاكل تعارض الأكواد أثناء التحرير.

خاصية نسخ الكود هي من أهم الميزات التي يمكن أن تقدمها لزوار مدونتك، فهي توفر عليهم الوقت وتضمن دقة الكود المنقول.

مدون تقني

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