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

اليوم نشرح طريقه من خلالها ستتمكن من اضافه الاكواد داخل المقالات يعاني الكثير من طريقة اضافه كود html, css, javascript 

في  مقاله او المشاركات في بلوجر او الموقع الإلكترونية

 تتكامل HTML بسلاسة مع CSS (Cascading Style Sheets) لتنسيق المظهر الجمالي للصفحات، ومع JavaScript لإضافة وظائف تفاعلية وديناميكية، مما يعزز من إمكانيات مواقع الويب ويجعلها أكثر تفاعلية واستجابة.تعتبر HTML الأساس الذي يُبنى عليه تطوير الويب، وبدونها، لن يكون للويب الهيكل والبنية المنظمة التي يعتمد عليها المستخدمون والمطورون على حد سواء.

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

وتستخدم ايضا في تصميم قوالب بلوجر - blogger ، وWordpress و Wix وغيرها.

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

بالخطوات طريقة معرفة وضع الأكواد يدويًا في الاماكن المناسبة لها.

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

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

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

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

كيفية أضافة كود html داخل القالب

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

1. توجه الى لوحة التحكم بلوجر وبعدها خيار المظهر في القائمة المنسدلة 
2. اضغط على خيار اخذ نسخة احتياطية 
3. بعد ذالك اضغط على خيار تعديل html

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

1. إضافة الكود داخل القالب
2. انتقل الى لوحة تحكم مدونتك ثم المظهر ومن القائمة المنسدلة أنقر تعديل HTML
3. اضغط في الكيبورد على Ctrl + F وابحث عن 

   كود  ]]></b:skin>

4. ضع الكود التالي فوق علامة ]]></b:skin>

5. واضغط حفظ

مثال على كود داخل القالب

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}  انظر الصوره ادناه.

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

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

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

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

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

<pre><code>

هنا الكود الذي تريده في صندق الكود

</code></pre>

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

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

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

     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>
    

ملاحظه 

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

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