إضافة صندوق عرض الأكواد مع زر النسخ بلوجر

 لماذا تحتاج إلى صندوق عرض أكواد احترافي؟

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

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

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

شكل صندوق الأكواد الاحترافي بعد التركيب.

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

ما أهمية صندوق الأكواد للسيو وتجربة المستخدم؟

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

1. تحسين تجربة المستخدم (UX): الزائر يبحث عن السرعة. زر "نسخ" يوفر عليه عناء تحديد النص يدوياً خاصة على الهواتف المحمولة حيث يكون التحديد صعباً.
2. زيادة وقت البقاء في الموقع: عندما يكون المحتوى منظماً، يقضي الزائر وقتاً أطول في القراءة والتطبيق، مما يرسل إشارات إيجابية لمحركات البحث.
3. المصداقية والاحترافية: التنسيق الجيد يعطي انطباعاً بأن الكاتب خبير في مجاله، مما يبني الثقة مع الجمهور.
4. منع الأخطاء البرمجية: النسخ اليدوي قد يؤدي لنسخ أحرف زائدة أو ناقصة، بينما زر النسخ البرمجي يضمن نسخ الكود كما هو تماماً.

"التصميم ليس مجرد شكل، التصميم هو كيف تعمل الأشياء. وتسهيل وصول المستخدم للمعلومة هو جوهر التصميم الناجح."

التجهيز والخطوات الأولية

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

⚠️ تنبيه هام جداً: قبل البدء في تعديل أي كود داخل قالب مدونتك، يرجى أخذ نسخة احتياطية (Backup) للقالب الحالي. هذا الإجراء هو صمام الأمان الذي يسمح لك باستعادة موقعك في حال حدوث أي خطأ غير مقصود.

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

الخطوة الأولى| إضافة تنسيقات CSS (التصميم)

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

اتبع المسار التالي:

• انتقل إلى لوحة تحكم بلوجر.
• اختر "المظهر" ثم "تعديل HTML".
• اضغط داخل صندوق الأكواد واستخدم لوحة المفاتيح (CTRL + F) للبحث عن الوسم التالي: ]]></b:skin>

الآن، قم بنسخ الكود التالي وضعه فوق الوسم الذي بحثت عنه مباشرة:

/* صندوق الأكواد الاحترافي */ .code-box { background-color: #f5f7f9; border: 1px solid #e1e4e8; border-radius: 6px; position: relative; margin: 20px 0; font-family: 'Segoe UI', Tahoma, sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } /* منطقة عرض الكود */ .code-box pre { margin: 0; padding: 15px; overflow-x: auto; white-space: pre-wrap; font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; color: #24292e; line-height: 1.6; direction: ltr; /* مهم جداً لعرض الأكواد الإنجليزية بشكل صحيح */ text-align: left; } /* زر النسخ */ .copy-btn { position: absolute; top: 5px; right: 5px; background-color: #0b5394; color: #fff; border: none; border-radius: 4px; padding: 5px 12px; font-size: 12px; cursor: pointer; opacity: 0.8; transition: all 0.3s ease; z-index: 10; } .copy-btn:hover { opacity: 1; background-color: #084279; } .copy-btn.copied { background-color: #28a745; }

الخطوة الثانية| إضافة كود JavaScript (الوظيفة)

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

ابحث في القالب عن وسم الإغلاق </body> (يكون عادةً في آخر الأكواد)، وضع الكود التالي فوقه مباشرة:

<script> // وظيفة نسخ الكود document.querySelectorAll('.copy-btn').forEach(button => { button.addEventListener('click', () => { const codeBox = button.nextElementSibling; // يفترض أن الكود يأتي بعد الزر const codeText = codeBox.innerText; navigator.clipboard.writeText(codeText).then(() => { const originalText = button.innerText; button.innerText = 'تم النسخ!'; button.classList.add('copied'); setTimeout(() => { button.innerText = originalText; button.classList.remove('copied'); }, 2000); }).catch(err => { console.error('فشل النسخ:', err); }); }); }); </script>

💡 ملاحظة تقنية: هذا السكريبت يستخدم تقنية Clipboard API الحديثة، وهي أسرع وأكثر أماناً من الطرق القديمة، وتعمل بامتياز على الهواتف الذكية والمتصفحات الحديثة.

كيفية استخدام الصندوق داخل مقالاتك (خطوة بخطوة)

الآن وقد قمنا بتركيب الأداة بنجاح، كيف يمكنك استخدامها أثناء كتابة مقال جديد؟ الأمر بسيط جداً، لكنه يحتاج لتركيز بسيط في المرة الأولى.

عندما ترغب في وضع كود داخل مقالك، اتبع التالي:

1. انتقل إلى تبويب عرض HTML في محرر بلوجر (أيقونة القلم > عرض HTML).
2. في المكان الذي تريد ظهور الصندوق فيه، الصق الهيكل التالي:

<div class="code-box"> <button class="copy-btn">نسخ</button> <pre><code> ضع الكود الخاص بك هنا </code></pre> </div>

تشفير الأكواد| السر الذي يغفله الكثيرون

هذه هي أهم فقرة في المقال بالكامل. إذا حاولت وضع كود HTML (مثل <div>) مباشرة داخل الصندوق، فإن المتصفح سيفهمه على أنه أمر برمجي وسيحاول تنفيذه بدلاً من عرضه! والنتيجة ستكون اختفاء الكود أو تشوه الصفحة.

لحل هذه المشكلة، يجب عليك القيام بما يسمى "تشفير الكود" (Escape HTML) قبل وضعه داخل الصندوق. العملية بسيطة:

الرمز الأصلي	يجب تحويله إلى	الوصف
<	&lt;	علامة أصغر من (بداية الوسم)
>	&gt;	علامة أكبر من (نهاية الوسم)
"	&quot;	علامة التنصيص

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

نصائح إضافية لتخصيص الصندوق

يمكنك التلاعب في كود CSS الذي أضفناه في الخطوة الأولى لتغيير شكل الصندوق ليتناسب مع ذوقك:

• تغيير الخلفية: ابحث عن background-color في كلاس .code-box pre وغير الرمز اللوني إلى لون داكن (مثلاً #2d2d2d) للحصول على "الوضع الليلي".
• تغيير لون الخط: إذا جعلت الخلفية داكنة، لا تنسَ تغيير color إلى لون فاتح (مثلاً #ffffff).
• حجم الخط: تحكم في font-size لتكبير أو تصغير النصوص.

الأسئلة الشائعة والمشاكل المحتملة

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

س: الكود يظهر باتجاه اليمين لليسار، كيف أعدله؟
ج: لقد قمنا بإضافة خاصية direction: ltr; في كود CSS تلقائياً لضمان ظهور الأكواد بالاتجاه الصحيح (من اليسار لليمين) لأن لغات البرمجة إنجليزية.

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

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

تذكر دائماً أن الزائر هو الملك، وكلما سهّلت عليه الوصول للمعلومة ونسخها، كلما زاد ولاؤه لموقعك. ابدأ الآن بتطبيق ما تعلمته، ولا تتردد في التجربة والتطوير المستمر لموقعك.

هل واجهت مشكلة في التطبيق؟ اترك تعليقاً بالأسفل وسنكون سعداء بمساعدتك!

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

تنويه! المحتوى محمي بموجب قانون DMCA. يمنع نسخ أو إعادة نشر المحتوى دون إذن مسبق. جميع الحقوق محفوظة © بلوجربلس.

شاهد ايضا :