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

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

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

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

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

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

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

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

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

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

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

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

يوجد العديد من الطرق لذا سنشرح طريقة وضع كود HTML داخل مقاله بلوجر

الطريقة سهلة تحتوي على كودين مهمين

كود داخل قالب المدونة وكود داخل مقاله او المشاركه

ملاحظه: يرجى اخذ نسخة احتياطية من القالب :

اولا خطوات اضافة الكود داخل القالب

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

7. مثال على الكود في القالب

   

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

طريقة إضافة الكود في المقاله

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

انظر الآتي:

1. بداخل المقال اضغط على زر القلم الادوات
2. وقم بتغيير الوضع الى "عرض HTML"
3. على سبيل المثال:

   

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

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

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

طريقه مبسطه لإنشاء صندوق الكود

طريقه اخرى مبسطه للمبتدئين لتجنب مشاكل اكواد مدونتك لوضع صندوق الكود بشكل جميل:

1. أضف الكود التالي في المكان الذي تريد ان يظهر في مقالتك.
2. قم بوضع الكود الخاص بك في المكان المخصص أو المشار الية، كما هو موضح في الكود.

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

☆
ضع الكود بعد كتابه المقال لتجنب مشاكل الاكواد

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

شاهد ايضا :