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

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

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

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

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

شرح اضافة هذه الميزة الى قالب بلوجر

• نذهب الى المظهر
• نختارتعديل HTML
• نبحث بداخل اكواد القالب عن </head> و نضيف الكود التالي اعلاه

<style>  

blockquote{position:relative;background:linear-gradient(135deg,#0f172a,#1e293b);color:#e2e8f0;padding:20px 30px;margin:20px 0;border-radius:12px;font-size:14px;line-height:1.6;overflow-x:auto;border-left:4px solid #38bdf8;box-shadow:0 10px 25px rgba(0,0,0,0.3);transition:all 0.3s ease;cursor:pointer;direction:ltr;line-height:1.7em;margin:0 auto;font-size:15px;border-radius:3px;padding:65px 30px 30px 30px;text-align:left;overflow:auto;word-wrap:normal;height:100%;max-height:320px;white-space:pre-wrap;width:90%}

blockquote::-webkit-scrollbar{height:6px}

blockquote::-webkit-scrollbar-track{background:transparent}

blockquote::-webkit-scrollbar-thumb{background:#2778fc;border-radius:10px}

blockquote:before{position:absolute;top:17px;left:10px;content:&quot;نقرتين لنسخ الكود&quot;;font-size:50px;color:#ffffff;font-style:normal;line-height:1;font-size:16px;font-family:inherit;background:#2778fc;padding:8px 7px;width:28%;text-align:center;border-radius:3px;

font-weight:bold}

.rtl blockquote:before{left:unset;right:36px}

.copy-toast{position:fixed;bottom:30px;left:6%;transform:translateX(-50%);background-color:#333;color:#fff;padding:10px 20px;border-radius:5px;font-size:14px;opacity:0;transition:opacity 0.3s ease,bottom 0.3s ease;z-index:9999}

.copy-toast.show{opacity:1;bottom:50px}

</style>

• نبحث عن </body> و نضيف كود الجافا سكربت أعلاه

<script type='text/javascript'>

//<![CDATA[

   document.querySelectorAll("blockquote").forEach(block => {

    block.addEventListener("dblclick", async function () {

        const selection = getSelection();

        selection.removeAllRanges();

        selection.selectAllChildren(this);

        try {

            await navigator.clipboard.writeText(this.innerText);

            showToast(" تم نسخ الكــود !");

        } catch {

            showToast(" النسخ غير مدعوم !");

        }

    });

});

function showToast(message) {

    const toast = document.createElement("div");

    toast.className = "copy-toast";

    toast.textContent = message;

    document.body.appendChild(toast);

    setTimeout(() => toast.classList.add("show"), 50);

    setTimeout(() => {

        toast.classList.remove("show");

        setTimeout(() => toast.remove(), 300);

    }, 2000);

}

//]]>

</script>

قم بالحفظ و ثم عاين النتيجة بداخل المواضيع 

وفي الختام !

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