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

<style>
body2 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.text-box {
max-width: 600px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
text-align: right;
position: relative;
margin-bottom: 20px;
transition: box-shadow 0.3s;
}
.text-box:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.top-area {
margin-bottom: 15px;
}
h2 {
color: #333;
font-size: 1.5em;
}
textarea {
width: calc(100% - 20px);
height: 150px;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: #edeff6;
color: #01579b;
}
.copy-btn-container {
position: relative;
}
.copy-btn {
cursor: pointer;
background-color: #2980b9;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
font-size: 16px;
display: inline-block;
transition: background-color 0.3s;
}
.copy-btn i {
margin-right: 5px;
}
.copy-btn:hover {
background-color: #45a049;
}
.copy-success-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ff5722;
color: #fff;
padding: 10px 15px;
border-radius: 4px;
display: none;
font-size: 14px;
}
</style>

ابحت عن الرمز <head/> ضع اسفله الكود التالي

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' rel='stylesheet'/>

قم بالبحث عن هذا الوسم <body/> التالي

<script>
    function copyToClipboard(codeId, messageId) {
      var textarea = document.getElementById(codeId).querySelector(&#39;textarea&#39;);
      textarea.select();
      document.execCommand(&#39;copy&#39;);
      var successMessage = document.getElementById(messageId);
      successMessage.style.display = &#39;block&#39;;
      setTimeout(function() {
        successMessage.style.display = &#39;none&#39;;
      }, 2000); // يمكنك ضبط هذا الرقم حسب مدى ظهور الرسالة
    }
  </script>

كيفية إضافة صندوق الاكواد code box في المقالة

شاهد: كيفية إنشاء ملف robots.txt مخصص مثالي لمدونات بلوجر

انتقل إلى صفحة إنشاء المشاركة.

اكتب المحتوى الذي تريده وعندما تريد إضافة صندوق الأكواد، انقر على “عرض HTML” وألصق الكود التالي في المكان المناسب

<div class="text-box" id="code1">
    <div class="top-area">
      <p>HTML</p>
    </div>
    <textarea readonly="" spellcheck="false"> 
 // ضع الاكواد هنا

    </textarea>
    <div class="copy-btn-container">
      <div class="copy-success-message" id="copy-success-message1">تم نسخ النص إلى الحافظة</div>
      <div class="copy-btn" onclick="copyToClipboard('code1', 'copy-success-message1')"><i class="fas fa-copy"></i> نسخ</div>
    </div>
  </div>