إنشاء صندوق داخل تدوينة بلوجر يحتوي على نص أو كود قابل للنسخ – مدونة سايكو

 

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

فوائد استخدام هذا الصندوق في المدونة:

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

خطوات تركيب الكود:

1. إضافة الكود إلى التدوينة:

أول خطوة هي نسخ الكود التالي ولصقه داخل تدوينتك في محرر

    
<style>
  .code-box {
    position: relative;
    background-color: #000; /* خلفية سوداء */
    border: 1px solid #3e3e3e; /* إطار داكن */
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #fff; /* لون الخط أبيض */
    max-height: 300px; /* أقصى ارتفاع للصندوق */
    overflow-y: auto; /* شريط تمرير */
  }

  .copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .copy-btn:hover {
    background-color: #0056b3;
  }

  .copy-btn.copied {
    background-color: #28a745; /* لون أخضر عند النسخ */
  }

  .copy-btn i {
    margin-right: 5px; /* مسافة صغيرة بين الأيقونة والنص */
  }
</style>

<div class="code-box">
  <button class="copy-btn" id="copyButton" onclick="copyToClipboard()">
    <i class="fas fa-copy"></i> نسخ
  </button>
  <div id="codeBox">
    <!-- 


  
  
    
<style>
  .code-box {
    position: relative;
    background-color: #000; /* خلفية سوداء */
    border: 1px solid #3e3e3e; /* إطار داكن */
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #fff; /* لون الخط أبيض */
    max-height: 300px; /* أقصى ارتفاع للصندوق */
    overflow-y: auto; /* شريط تمرير */
  }

  .copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .copy-btn:hover {
    background-color: #0056b3;
  }

  .copy-btn.copied {
    background-color: #28a745; /* لون أخضر عند النسخ */
  }

  .copy-btn i {
    margin-right: 5px; /* مسافة صغيرة بين الأيقونة والنص */
  }
</style>

<div class="code-box">
  <button class="copy-btn" id="copyButton" onclick="copyToClipboard()">
    <i class="fas fa-copy"></i> نسخ
  </button>
  <div id="codeBox">
    <!-- ضع النص أو الكود هنا -->
    هذا هو النص أو الكود الذي ترغب في نسخه. يمكنك وضع أكواد طويلة وستظهر مع شريط تمرير.
  </div>
</div>

<script>
  function copyToClipboard() {
    var codeBox = document.getElementById("codeBox").innerText;
    var tempInput = document.createElement("textarea");
    tempInput.value = codeBox;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);

    // تغيير لون الزر عند النسخ
    var copyButton = document.getElementById("copyButton");
    copyButton.classList.add("copied");
    copyButton.innerHTML = '<i class="fas fa-check"></i> تم النسخ';
    
    // إعادة النص الأصلي بعد ثوانٍ
    setTimeout(function() {
      copyButton.classList.remove("copied");
      copyButton.innerHTML = '<i class="fas fa-copy"></i> نسخ';
    }, 2000);
  }
</script>

<!-- مكتبة أيقونات FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    
  



 -->
    هذا هو النص أو الكود الذي ترغب في نسخه. يمكنك وضع أكواد طويلة وستظهر مع شريط تمرير.
  </div>
</div>

<script>
  function copyToClipboard() {
    var codeBox = document.getElementById("codeBox").innerText;
    var tempInput = document.createElement("textarea");
    tempInput.value = codeBox;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);

    // تغيير لون الزر عند النسخ
    var copyButton = document.getElementById("copyButton");
    copyButton.classList.add("copied");
    copyButton.innerHTML = '<i class="fas fa-check"></i> تم النسخ';
    
    // إعادة النص الأصلي بعد ثوانٍ
    setTimeout(function() {
      copyButton.classList.remove("copied");
      copyButton.innerHTML = '<i class="fas fa-copy"></i> نسخ';
    }, 2000);
  }
</script>

<!-- مكتبة أيقونات FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    

2. تخصيص الكود:

• تعديل النص داخل الصندوق: ضع الكود أو النص الذي ترغب في نسخه في المكان المحدد داخل الوسم <div id="codeBox">.
• تعديل الألوان: إذا كنت ترغب في تعديل الألوان أو الخطوط، يمكنك تخصيص الكود بسهولة من خلال تغيير القيم الموجودة في قسم الـ CSS.

3. فوائد الكود:

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

تحسين محركات البحث (SEO)

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

---

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