أفضل صندوق عرض الأكواد بزر نسخ مميز. أضف الأكواد إلى مقالاتك بطريقة احترافية ومميزة وأظهر فيها زر النسخ عن طريق أكواد بسبطة.
مهمة كود إضافة صندوق بلوجر
هو يقوم بإظهار الأكواد البرمجية للزائر بشكل احترافي ويسهل عليه نسخها بإضافة زر صغير دخل مربع الصندوق ليتمكن المشاهد من نسخ الكود بكل سهولة.
فإذ كان لديك أكواد تحب تنشرها في مدونتك بشكل احترافي يسهل عليك هذا الكود أشياء كثيرة وسيجعل صفحتك مرغوبة للزائر.
فهذا الكود هو أفضل كود على منصة بلوجر لأنه حديث وجديد ويميزة أكثر وجود زر النسخ فيه.
سننتقل إلى شرح استخدام هذا الكود المميز الذي سيساعدك في إضافتك أكوادك.
طريقة عمل الكود
هذا الكود سيعمل معك إذا قمت بتركيبة بطريق صحيح تابع مع الشرح خطوة بخطوة.
الطريق الأولى نحتاج إضاف 2 أكواد إلى القالب الكود الثالث نضيفه في المكان الذي نريد نضيف الكود في المقالة.
خطوات إضافة الأكواد
- الخطوة الأولى نقوم بنسخ الكود الأول أضف الكود الأول هنا
- ثم ننتقل إلى بلوجر ونفتح المظهر ثم أكواد HTML
- ثم نقوم نعمل كنترول إف في الكمبيوتر أو الهاتف لكن الهاتف تحتاج كيبورد مخصص يمكنك البحث عن البرنامج في قناتي في اليوتيوب اسمها قناة بلاروني الربحية أو تقوم بالبحث يدوي المطلوب هذا الكود : ]]></b:skin>
- ثم ننسخ هذا الكود فوقه مباشرة
/*-- codebox by jistweb.com --*/
.code-box{border:1px solid #ccc;border-radius:4px;padding:16px;position:relative;margin:10px 0;}
.code-box pre{background-color:#f8f8f8;border:0;margin:0;overflow:auto;padding:16px}
.copy-button{background-color:#6cc060;border:0;border-radius:2px;color:#fff;cursor:pointer;font-size:12px;outline:0;padding:5px 13px;position:absolute;right:16px;top:16px;transition:background-color .2s}
.copy-button:hover{background-color:#5ca751}
.post-body pre, pre.code-box {direction: ltr;display: block;background-color: #9b9b9b0d;font-family: Monospace;font-size: 13px;color: #444444;white-space: pre-wrap;line-height: 1.4em;padding: 20px;border: 1px solid #9b9b9b1a;border-radius: 5px;}
- ثم نبحث مرة أخرى عن كود اسمه
</body>
هذا الكود يوجد في اسفل القوالب
ثم نقوم بنسخ هذا الكود فوقه
<script type='text/javascript'>
//<![CDATA[
const codeBoxes=document.querySelectorAll(".code-box");codeBoxes.forEach(t=>{const e=t.querySelector(".copy-button");e.addEventListener("click",()=>{var e=t.querySelector("code");const o=window.getSelection(),c=document.createRange();c.selectNodeContents(e),o.removeAllRanges(),o.addRange(c),document.execCommand("copy"),o.removeAllRanges()})});
//]]></script>
الخطوة الأخيرة وهي التعديل عن طريق المقالات
طريقة التعديل عن طريق المقالاتأولا هذا الكود يكون معك دائما تستخدمه في أي كود نضيفه في مقالاتك انسخ هذا الكود
<div class="code-box">
<pre><code>
<!-- ضع الكود الذي تريد عرضه هنا بعد تحويله-->
</code></pre>
<button class="copy-button">نسخ</button>
</div>
وتضيف الكود داخلة تم تمسح الكتابة بالعربي وتضيف الكود الذي تريده يظهر في مدونتك
شكرا على تعليقك