اضافة صندوق الاكواد لجميع قوالب بلوجر بشكل احترافي 2025

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

اضافة صندوق الاكواد لجميع قوالب بلوجر بشكل احترافي 2025

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

لماذا يجب عليك استخدام صندوق اكواد بلوجر الاحترافي

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

مميزات استخدام صنوق اكواد لمدونات بلوجر

هناك مميزات رئيسية لاستخدام صندوق الاكواد ومنها: 

1. تلوين الكود: تحسين وضوح الكود وتسهيل قراءته.
2. زر النسخ: يوفر طريقة سريعة وسهلة للزوار لنسخ الرمز دون الحاجة إلى تحديد النص يدويا.
3. المتزلج: يسمح لك لعرض رموز طويلة دون كسر الشكل.
4. تصميم استجابة: جعل مربع تبدو كبيرة على أجهزة مختلفة.
5. تحسين تجربة المستخدم: جعل المحتوى الخاص بك أكثر جاذبية والمساهمة في زيادة تفاعل الزوار.

طريقة تركيب صندوق الاكواد داخل قوالب بلوجر 

خطوة رقم 1

1. توجهة الى لوحة التحكم الخاصة بمدونتك 
2. وبعدها ادخل الى قسم المظهر 
3. ومن ثم تخصيص 
4. ومن ثم قم بالبحث عن </body>
5. ومن ثم الصق الكود التالي فوقه مباشرة 

    <script>/*<![CDATA[*/
        function copyCode() {
            const codeElement = document.getElementById('codeContent');
            const range = document.createRange();
            range.selectNode(codeElement);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);

      
            document.execCommand('copy');
            selection.removeAllRanges();
            const message = document.getElementById('osamacopyMessage');
            message.style.visibility = 'visible';
            setTimeout(() => {
                message.style.visibility = 'hidden';
            }, 2000);
        }/*]]>*/
    </script>

الخطوة رقم 2 

1. والان ابحث عن </style>
2. ومن ثم الصق الكود التالي فوق مباشرة

.code-container {
            position: relative;
            max-width: 800px;
            margin: auto;
        }
        .code-block {
            background-color: #2d2d2d;
            color: #ffffff;
            padding: 15px;
            border-radius: 5px;
            overflow: auto;
            max-height: 400px;
            border: 1px solid #007bff;
        }
        .osama11 {
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            position: absolute;
            right: 15px;
            top: 15px; 
            z-index: 1000;
            transition: transform 0.2s; 
        }
        .osama11:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
        .osamamessage {
            position: absolute;
            right: 15px;
            top: 60px;
            color: #00ff00;
            visibility: hidden;
        }


   

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

    <div class="code-container">
        <button class="osama11" onclick="copyCode()">نسخ الكود</button>
        <span class="osamamessage" id="osamacopyMessage">تم نسخ الكود!</span>
        <div class="code-block" id="codeBlock">
            <pre><code class="language-javascript" contenteditable="true" id="codeContent">



            </code></pre>
        </div>
    </div>

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

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

لقد انتهيت الآن من شرح صندوق عرض الاكواد  بزر نسخ احترافي.