سلسلة الإضافات (1): إضافة صندوق عرض الأكواد البرمجية مع زر "نسخ الكود" - مدونة بلوجر

[codeNET]

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

مميزات هذه الإضافة:
• تعطي مظهراً برمجياً احترافياً للمدونة.
• تحتوي على زر "نسخ" لتسهيل التجربة على الزائر.
• متوافقة تماماً مع الهواتف الذكية (Responsive).
• خفيفة جداً ولا تؤثر على سرعة تحميل الصفحة.

أولاً: إضافة أكواد CSS (تنسيق الصندوق)
توجه إلى المظهر > تعديل HTML، وابحث عن الوسم [

]</style>[

] وضع الكود التالي فوقه مباشرة:

.post-code-box {
background: #282c34;
color: #abb2bf;
border-radius: 8px;
padding: 15px;
position: relative;
font-family: 'Courier New', monospace;
margin: 20px 0;
direction: ltr;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
background: #61afef;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.copy-btn:hover { background: #528bff; }

ثانياً: إضافة كود JavaScript (وظيفة النسخ)
ابحث عن الوسم [

]</body>[

] وضع الكود التالي فوقه:

<script>
function copyCode(btn) {
var code = btn.parentElement.querySelector('code').innerText;
navigator.clipboard.writeText(code);
btn.innerText = 'تم النسخ!';
setTimeout(function() { btn.innerText = 'نسخ'; }, 2000);
}
</script>

ثالثاً: كيفية استخدام الإضافة داخل المقال
عند كتابة مقال جديد، قم بالتحويل إلى عرض (HTML) وضع الكود الخاص بك داخل هذا الهيكل:

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

نصيحة من "بلوجر":
دائماً عند إضافة أكواد JavaScript، تأكد من وضعها في نهاية القالب قبل وسم الإغلاق لضمان عدم تأخير "أول طلاء" للمدونة (FCP)، مما يحافظ على سرعة موقعك في أدوات الفحص.

---

في الدرس القادم: سنتعلم كيفية إضافة صندوق ملاحظات (Note Box) احترافي بأربعة أشكال (تنبيه، معلومة، خطأ، نجاح) لتمييز النصوص الهامة في مقالاتك.
هل اشتغلت الإضافة معكم بشكل صحيح؟ إذا واجهت أي مشكلة في التنسيق، اترك تعليقاً بنوع قالبك وسأساعدك في تعديل الألوان!