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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

انظر الآتي:

• بداخل المقال اضغط على زر القلم الادوات
• وقم بتغيير الوضع الى "عرض html"

على سبيل المثال:

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

• الكود الاول :- <pre><code>

هنا كود المحتوى الذي تريده ان يظهر.

• الكود الثاني:- </code></pre>

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

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

• أضف الكود التالي في المكان الذي تريد ان يظهر في مقالتك. 
• كتابه الكود الخاص بك احذف الكود 👇 واستبدله بالكود الذي تريده :

 (   // اكتب الكود الذي تريد عرضه هنا

     console.log('Hello, world!');)

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

ملاحظه 

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

وهنا قد انتهينا من شرح طريقة اضافة صندق الكود داخل المقاله