تنسيق المواضيع

 روابط الخط

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>

<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' integrity='sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==' referrerpolicy='no-referrer' rel='stylesheet'/>
  
  

الملاحظة والتعديل وأخلاء المسؤولية

اكواد css

/* ملاحظات مهمة والاعداد واخلاء المسؤلية*/
.post-body .boxification.note{border-color:#1165F1}
.post-body .boxification{position:relative;overflow:visible;padding:20px;margin:40px 5px;background-color:#ffffff;border:1px solid rgba(69,90,99,.12);clear:both;display:block;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}
.post-body .boxification.note h6:before{content:"\e88f"}
.post-body .boxification h6:before{display:inline-block;font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:21px;-webkit-font-smoothing:antialiased;vertical-align:bottom;margin:0 1px}
.post-body .boxification.note h6{position:absolute;background-color:#ffffff;color:#1165f1;padding:0 10px;margin:0 10px;font-size:15px;display:inline-block;z-index:1;top:-10px;right:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 20px);height:24px;line-height:24px}
.post-body .boxification.edit h6{position:absolute;background-color:#ffffff;color:#FF5722;padding:0 10px;margin:0 10px;font-size:15px;display:inline-block;z-index:1;top:-10px;right:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 20px);height:24px;line-height:24px}
.post-body .boxification.edit{border-color:#FF5722}
.post-body .boxification.edit h6:before{content:"\e869"}
.post-body .boxification.description{border-color:#455A63}
.post-body .boxification.description h6{position:absolute;background-color:#ffffff;color:#388D80;padding:0 10px;margin:0 10px;font-size:15px;display:inline-block;z-index:1;top:-10px;right:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 20px);height:24px;line-height:24px}
.post-body .boxification.description h6:before{content:"\f1cd"}

اكواد المشاركة

الملاحظة 

<div class="boxification note">
<h6>
ملاحظات مهمة:
</h6>
<div class="module">
1- إختياري..يمكنك تخصيص مكان وضع البيانات في تطبيق كما أضفناها في المسار
</div>
</div>

التعديل

  <div class="boxification edit">
<h6>
تعديل الكود
</h6>
<div class="module">
المتغير <samp>blogsid</samp> المحدد بهذا اللون <span class="color-span orange"></span> خاص بـمعرف مدونتك قم بوضعه مكان القيمة <var>0000000000000000</var> .
  </div>
<div class="module">
المتغير <samp>nameblog</samp> المحدد بهذا اللون <span class="color-span green"></span> خاص بـرابط مدونتك ضعه مكان <var>//exampel.blogspot.com/</var> بدون البروتوكول <samp>https:</samp>.
  </div>
</div>

اخلاء المسؤولية

<div class="boxification description">
                        <h6>
                            نوع الصفحة:
                        </h6>
                        <div class="module">
&nbsp;يتحقق الشرط من نوع الصفحة ويعرض قيمة بين الصواب والخطأ. مفيدة جدا لضبط المحتوى ومع إمكانيات أكثر وأشمل من الشروط المستندة إلى القاعدة الشرطية <samp>&lt;data:pageType/&gt;</samp>
                      </div>
                    </div>

إضافة التضليل 

اكواد css

mark22 {
    --st-border-opacity: 1;
    --st-bg-opacity: 1;
    --st-text-opacity: 1;
    background-color: rgb(100 116 139/var(--st-bg-opacity));
    border-color: rgb(71 85 105/var(--st-border-opacity));
    border-radius: 0.375rem;
    color: rgb(255 255 255/var(--st-text-opacity));
    padding: 0.1rem 0.3rem;
    white-space: nowrap;
}

كود المشاركة 

<mark22>CTRL + F</mark22>

الملاحظة مع ايقونات مواقع التواصل

اكواد css11

/* ستايل لتحسين شكل الكتلة */ .note1-block { background: linear-gradient(to left,#d24949,#9e44c9); color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: 20px; margin: 20px 0; display: flex; align-items: center; justify-content: space-between; flex-direction: column; /* تغيير اتجاه العرض إلى عمودي */ text-align: center; /* مركزة عناصر الكتلة */ } /* ستايل لعنوان الملاحظة */ .note1-title { font-size: 24px; font-weight: bold; margin-bottom: 20px; display: flex; align-items: center; } /* ستايل لنص الملاحظة */ .note1-content { font-size: 16px; margin-bottom: 15px; } /* ستايل لأيقونة الملاحظة */ .note1-icon { font-size: 32px; margin-left: 11px /* المسافة بين الأيقونة والنص */ } /* ستايل لأيقونات وسائل التواصل الاجتماعي */ .social-icons { display: flex; gap: 10px; } .social-icons a { color: #fff; font-size: 24px; } 

  

كود المشاركة 

  <div class="note1-block">
    <div class="note1-title">
      <span class="note1-icon" style="margin-right: 30px;"><i class="fas fa-exclamation-circle"></i></span> <!--أيقونة لتنبيه-->
      عنوان الملاحظة
    </div>
    <div class="note1-content">
      <p>نص الملاحظة يمكن أن يكون هنا. يمكنك إضافة أي محتوى تريده.</p>
    </div>
    <div class="social-icons">
      <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
      <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
      <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
      <a href="#" target="_blank"><i class="fab fa-youtube"></i></a>
      <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>

    </div>
  </div>

333333333333333333333333333333333333333