إضافة كتلة ملاحظات أنيقة أو مربع ملاحظات إلى أي قالب Blogger

أضف كتلة ملاحظات أنيقة أو مربع ملاحظات إلى أي قالب Blogger

  إضافة مربع ملاحظات أنيق وملون في أي قالب Blogger، يتم استخدام مربع الملاحظات لإضافة معلومات مهمة أو جمل تحذيرية أو جمل مميزة حتى يتمكن المستخدمون من ملاحظتها بسهولة والانتباه إليه 

ما هو Note Box؟

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

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

فوائد كتلة الملاحظات

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

كيفية إضافة كتلة ملاحظات أو صندوق ملاحظات أنيق وملون في أي قالب بلوجر ؟

الخطوة 1: أولاً قم بتسجيل الدخول إلى لوحة تحكم Blogger الخاصة بك.

الخطوة 2: في لوحة معلومات Blogger، انقر فوق " المظهر" .

الخطوة 3:  انقر على أيقونة السهم لأسفل بجوار زر "تخصيص" .

الخطوة 4:  انقر فوق تحرير HTML ، سيتم إعادة توجيهك إلى صفحة التحرير.

الخطوة 5: الآن ابحث عن الكود ]]></b:skin> وقم بلصق أكواد CSS التالية فوقه.

  /*stylish note box by FreemiumTech 1*/

    .FreemiumTech-note1{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;background:linear-gradient(110deg,#fdcd3b,#ffed4b )}.FreemiumTech-note1:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.FreemiumTech-note1:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important}
  
   /*stylish note box by FreemiumTech 2*/
    .FreemiumTech-note2{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;background:linear-gradient(to right,#ff6464,#5ac8fa)}.FreemiumTech-note2:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.FreemiumTech-note2:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important}
  
  
   /*stylish note box by FreemiumTech 3*/
  .FreemiumTech-note3{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;color:#fff;background:linear-gradient(110deg,#000,rgba(0,0,0,0) 33%),linear-gradient(110deg,#dd0000,#ffc608)}.FreemiumTech-note3:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.FreemiumTech-note3:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important}
  
  
   /*stylish note box by FreemiumTech 4*/
  .FreemiumTech-note4{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;color:#fff;background:linear-gradient(-70deg,#fa7c30,rgba(0,0,0,0)),url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');background-size:cover;background-position:50% 21%;}.FreemiumTech-note4:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.FreemiumTech-note4:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important} 
  

     /*stylish note box by FreemiumTech 5*/
  .FreemiumTech-note5{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;color:#fff;background:linear-gradient(110deg,#a60af3,#7a00cc,#c03fff,rgba(0,0,0,0)),radial-gradient(farthest-corner at 0% 0%,#5EC6F7,#5EC6F7)}.FreemiumTech-note5:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.FreemiumTech-note5:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important}
  
  
     /*stylish note box by FreemiumTech 6*/
  .FreemiumTech-note6{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;background:linear-gradient(70deg,#fff810,rgba(0,0,0,0) ),linear-gradient(30deg,#63e89e,#ff7ee3)}.FreemiumTech-note6:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.FreemiumTech-note6:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important} 

لقد ذكرت أسماء CSS، لذا استخدم نفس CSS المحدد إذا كنت تستخدم أي كتلة ملاحظة واحدة فقط

الخطوة 4: الآن قم بنسخ أكواد HTML التالية ولصقها في منشورك أو في أي مكان تريد إضافة كتلة الملاحظات هذه فيه: -

ملاحظة: هذا عرض توضيحي لصندوق الملاحظات الأنيق 1

 <p class="FreemiumTech-note1"><b>Note: This a Stylish Note Box Demo 1</b></p> 

ملاحظة: هذا عرض توضيحي لصندوق الملاحظات الأنيق 2

 <p class="FreemiumTech-note2"><b>Note: This a Stylish Note Box Demo 2</b></p> 

ملاحظة: هذا هو العرض التوضيحي لصندوق الملاحظات الأنيق 3

 <p class="FreemiumTech-note3"><b>Note: This a Stylish Note Box Demo 3</b></p> 

ملاحظة: هذا عرض توضيحي لصندوق الملاحظات الأنيق 4

 <p class="FreemiumTech-note4"><b>Note: This a Stylish Note Box Demo 4</b></p> 

ملاحظة: هذا عرض توضيحي لصندوق رقم 3

<p class="FreemiumTech-note5"><b>Note: This a Stylish Note Box Demo 5</b></p>

ملاحظة: هذا عرض توضيحي لصندوق الملاحظات الأنيق 6

 <p class="FreemiumTech-note6"><b>Note: This a Stylish Note Box Demo 6</b></p> 

خاتمة

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

الانتقال إلى الرابط المطلوب

معلومات الكاتب

مصمم

اديب القربعي كنز المعلومات

اضافات اكواد قوالب تحسين محركات البحث مدونات بلوجر