إنشاء صندوق ملاحظات في منشورات مدونتك

قم بتدوين ملاحظة مهمة على المدونة تتيح لقراء المقالة معرفة الرسالة أو الملاحظة المهمة التي تقدمها. ولذلك فمن السهل على القراء أن يفهموا جيدًا الأوامر الموجودة في الملاحظات.

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

كيفية إضافة مربع نص إلى منشورات مدونة بلوجر

أول ما عليك فعله هو إضافة كود Css الذي قمت بإعداده أدناه واتباع التعليمات أدناه.

افتح لوحة تحكم بلوجر

 انتقل إلى خيارات الموضوع.

 تحرير HTML

اضغط على المفاتيح CTRL + F لتسهيل البحث.

ابحث عن الكود ]]></b:skin>

انسخ ملف Css أدناه، ثم ضعه فوق ]]></b:skin> مباشرةً

Css 1

 .note1{
      position: relative;
    padding: 20px 30px 20px 50px;
    background-color: #e1f5fe47;
    color: #01579b;
    font-size: 1rem;
    font-family: var(--font-body);
    line-height: 1.62em;
    border-radius: 2px;
  }

 .note1:before {
    content: '1';
    position: absolute;
    right: 10px;
    font-size: 20px;
}
@media screen and (max-width: 640px){
 .note1 {width: calc(100% + 40px);left: -20px;font-size: 1rem;border-radius: 0;}}



.note2 {
    position: relative;
    padding: 16px 66px 16px 50px;
    background: #f6faff;
    color: #3c4043;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.6em;
    border-radius: 10px;
    overflow: hidden;
}
  .note2::before {
    content: '';
    width: 60px;
    height: 60px;
    background: #e64646;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -12px;
    right: -12px;
    opacity: .1;
}
  
.note2::after {
    content: '2';
    position: absolute;
    right: 18px;
    top: 16px;
    font-size: 20px;
    min-width: 15px;
    text-align: center;
}


.note3 {
    position: relative;
    padding: 16px 51px 16px 50px;
    background: #072850;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.6em;
    border-radius: 5px;
    overflow: hidden;
  }
.note3::before {
    content: '';
    width: 30px;
    height: 30px;
    background: #de0d0d;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 16px;
    right: 13px;
  }
.note3::after {
    content: '3';
    position: absolute;
    right: 22px;
    top: 18px;
    font-size: 20px;
    min-width: 15px;
    text-align: center;
    color: #ffffff;
  }


.note4 {
    position: relative;
    padding: 16px 47px 16px 50px;
    background: #4d90fe;
    color: #f8f8f8;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6em;
    border-radius: 5px;
    overflow: hidden;
  }
.note4::before {
    content: '';
    width: 30px;
    height: 30px;
    background: #ffd907;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    right: 8px;
  }
.note4::after {
    content: '4';
    position: absolute;
    right: 16px;
    top: 17px;
    font-size: 20px;
    min-width: 15px;
    text-align: center;
    color: #22211f;
  }

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

كيفية إنشاء صندوق ملاحظات في منشورات مدونتك

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

Html 2

<p class="note1">اكتب هنا ملاحظاتك  </p>

اكتب هنا ملاحظاتك

---

<p class="note2">اكتب هنا ملاحظاتك  </p>

اكتب هنا ملاحظاتك

---

<p class="note3">اكتب هنا ملاحظاتك  </p>

اكتب هنا ملاحظاتك

---

<p class="note4">اكتب هنا ملاحظاتك  </p>

اكتب هنا ملاحظاتك

لا تنس استبدال كل الكلماتاكتب هنا ملاحظاتك بجملك الخاصة.

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

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