الصفحة الرئيسية
اضافات بلوجر

إضافة مربع تنبيه في موقع بلوجر – دليل شامل خطوة بخطوة

إضافة مربع تنبيه احترافي في بلوجر بسهولة لجذب انتباه الزوار وتحسين تجربة المستخدم، شرح كامل مع كود جاهز للتركيب والتخصيص.
صدام المرشد
بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

تعرّف على كيفية إضافة مربع تنبيه في Blogger باستخدام HTML وCSS وJavaScript. عزّز تفاعل المستخدم برسائل تنبيه أنيقة وقابلة للتخصيص.

إضافة مربع تنبيه في موقع بلوجر – دليل شامل خطوة بخطوة

القوالب الأكثر توافقاً مع مربع التنبيه في بلوجر

اختيار القالب المناسب يلعب دوراً حاسماً في نجاح إضافة مربع التنبيه بسلاسة. بعض القوالب تدعم ميزات HTML/CSS/JS بشكل كامل بينما أخرى قد تحتاج لتعديلات إضافية. إليك أهم المعايير التي تجعل القوالب أكثر توافقاً مع هذه الميزة:

  1. قوالب بلوجر الرسمية: تتميز بدعم كامل لعناصر HTML5 وCSS3.
  2. القوالب الخفيفة: التي لا تحتوي على أكواد معقدة تعيق تنفيذ السكريبتات.
  3. القوالب الحديثة: المصممة بعد عام 2020 تكون أكثر مرونة.
  4. قوالب متجر بلوجر: غالباً ما تخضع لاختبارات التوافق.
  5. القوالب ذات الشهرة: مثل Sora أو MagPress أو Contempo.
ملاحظة! عند اختيار قالب، تأكد من أنه يدعم JavaScript ويحتوي على منطقة <head> واضحة. يمكنك اختبار التوافق المبدئي بمحاولة إضافة كود بسيط قبل الشروع في التعديلات الجذرية على القالب.

تعرّف على كيفية إضافة مربع تنبيه في. مدونة بلوجر باستخدام HTML وCSS وJavaScript. عزّز تفاعل المستخدمين برسائل تنبيه مخصصة على موقعك على Blogger.

إضافة مربع تنبيه خطوة بخطوة

إذا كنت تبحث عن طريقة إضافة مربع التنبيه في موقع Blogger، فإن هذه التدوينة مخصصة لك فقط.

1. اضافة اكوادCSS.

  1. اذهب إلى لوحة تحكم بلوجر.
  2. انتقل إلى السمات ثم انتقل إلى تحرير HTML.
  3. الآن ابحث عن ]]></b:skin> وقم بلصق كود CSS التالي فوقه مباشرة.
ملاحظة! العديد من القوالب لا تدعم CSS مباشرةً في ]]></b:skin> الوسوم. لإضافة تنسيق CSS في هذه القوالب، يمكنك وضع كود CSS الخاص بك فوق </head> الوسم. اربط كود CSS الخاص بك بين <style> الوسوم.  
/* Note */
.note{position:relative;padding-block:16px;padding-inline:50px 20px;background:#e8f0fe;color:#272eb5;font-size:.85rem;font-family:var(--fontB);line-height:1.6em;border-radius:10px;overflow:hidden;--transB:var(--white);--synxC:var(--black)}
.note::before{content:'';width:60px;height:60px;background:rgba(0,0,0,.2);display:block;border-radius:50%;position:absolute;top:-12px;inset-inline-start:-12px;opacity:.1}
.note::after{content:'\002A';position:absolute;inset-inline-start:18px;top:16px;font-size:20px;min-width:15px;text-align:center}
.note.wr{background:#fbe4ea;color:#9c0715}
.note.wr::after{content:'\0021'}
.note code{background:var(--white);border-color:#be2e3c}
/* Alert */
.alert{--clr:var(--linkC);--szsp:20px;position:relative;border-radius:8px;margin:var(--szsp) 0;padding:calc(var(--szsp) * .6) var(--szsp);font-size:calc(var(--szsp) * .75);line-height:calc(var(--szsp) * 1.3);overflow:hidden;z-index:1}
.alert:not(.outline){color:var(--clr)}
.alert:not(.outline)::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:var(--clr);z-index:-1;opacity:.1}
.alert.outline{border:1px solid var(--clr)}
.alert.info::after,.alert.warning::after,.alert.success::after,.alert.error::after{content:"";position:absolute;height:calc(100% - var(--sptp));inset-inline-start:calc(var(--szsp) * 1.125);border-inline-start:1px solid var(--clr);top:calc(var(--szsp) * 2.4);--sptp:calc(var(--szsp) * 3.2)}
.alert.info,.alert.warning,.alert.success,.alert.error{background-repeat:no-repeat;background-size:var(--szsp);background-position:calc(var(--szsp) * .7) calc(var(--szsp) * .7);padding-inline-start:calc(var(--szsp) * 2.5)}
.alert.info{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z' fill='%2300a7e6'/%3E%3C/svg%3E")}
.alert.warning{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z' fill='%23ecb621'/%3E%3C/svg%3E")}
.alert.success{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z' fill='%2341ba79'/%3E%3C/svg%3E")}
.alert.error{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0c53 0 96 43 96 96v3.6c0 15.7-12.7 28.4-28.4 28.4H188.4c-15.7 0-28.4-12.7-28.4-28.4V96c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4H312c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H416c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6V240c0-8.8-7.2-16-16-16s-16 7.2-16 16V479.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96.3c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z' fill='%23ff6372'/%3E%3C/svg%3E")}
.alert.info{--clr:#3e69a8}
.alert.warning{--clr:#8f6919}
.alert.success{--clr:#127a5b}
.alert.error{--clr:#be2e3c}
.alert>strong:first-child,.alert>i:first-child,.alert>b:first-child{display:block;margin-bottom:8px;font-family:var(--fontC);font-weight:700;color:var(--clr)}
.drK .alert.info, :root:not(.lzD) .modI:checked ~ .mainW .alert.info{--clr:#00a7e6}
.drK .alert.warning, :root:not(.lzD) .modI:checked ~ .mainW .alert.warning{--clr:#ecb621}
.drK .alert.success, :root:not(.lzD) .modI:checked ~ .mainW .alert.success{--clr:#41ba79}
.drK .alert.error, :root:not(.lzD) .modI:checked ~ .mainW .alert.error{--clr:#ff6372}
.alert>ol,.alert>ul{padding-inline-start:20px}
[dir=rtl] .alert.info,[dir=rtl] .alert.warning,[dir=rtl] .alert.success,[dir=rtl] .alert.error{background-position-x:calc(100% - var(--szsp) * .7)}

2. الآن انقر على حفظ القالب.

تكملة المقال: Plus UI v3.0: أكواد وإضافات لتخصيص احترافي

3. إضافة كود HTML للتنبيه.

انتقل إلى القسم الذي تريد ظهور التنبيه فيه (مثل المقالات أوالشريط الجانبي). - استخدم الاكود التالي:

معلومات!
لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت. 

<!--[ Note info ]-->
<p class='note'><b>Info!</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

تحذير!
لوريم إيبسوم الآلام، الجلوس أميت كونسيكتور أديبيسيسينج إيليت. 

<!--[ Note warning ]-->
<p class='note wr'><b>Warning!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

تقصير تنبيه افتراضي بسيط - لوريم إيبسوم دولور سيت أميت. 
<!--[ Alert default ]-->
<div class='alert'><b>Default</b>
  A simple default alert - Lorem ipsum dolor sit amet.
</div>

مخطط تفصيلي تنبيه مخطط بسيط - لوريم إيبسوم دولور سيت أميت. 
<!--[ Alert outlined ]-->
<div class='alert outline'><b>Outline</b>
  A simple outline alert - Lorem ipsum dolor sit amet.
</div>

معلومات! تنبيه معلومات بسيط - لوريم إيبسوم دولور سيت أميت. 
<!--[ Alert variant info ]-->
<div class='alert info'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

تحذير! تنبيه تحذيري بسيط - لوريم إيبسوم دولور سيت أميت. 
<!--[ Alert variant warning ]-->
<div class='alert warning'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

نجاح! تنبيه نجاح بسيط - لوريم إيبسوم دولور سيت أميت. 
<!--[ Alert variant success ]-->
<div class='alert success'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

خطأ! تنبيه خطأ بسيط - لوريم إيبسوم دولور سيت أميت. 
<!--[ Alert variant error ]-->
<div class='alert error'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

معلومات! تنبيه معلومات بسيط - لوريم إيبسوم دولور سيت أميت. 
<!--[ Alert variant info outlined ]-->
<div class='alert info outline'><b>Info!</b>
  A simple info alert - Lorem ipsum dolor sit amet.
</div>

تحذير! تنبيه تحذيري بسيط - لوريم إيبسوم دولور سيت أميت. 
<!--[ Alert variant warning outlined ]-->
<div class='alert warning outline'><b>Warning!</b>
  A simple warning alert - Lorem ipsum dolor sit amet.
</div>

نجاح! تنبيه نجاح بسيط - لوريم إيبسوم دولور سيت أميت. 
<!--[ Alert variant success outlined ]-->
<div class='alert success outline'><b>Success!</b>
  A simple success alert - Lorem ipsum dolor sit amet.
</div>

خطأ! تنبيه خطأ بسيط - لوريم إيبسوم دولور سيت أميت. 
<!--[ Alert variant error outlined ]-->
<div class='alert error outline'><b>Error!</b>
  A simple error alert - Lorem ipsum dolor sit amet.
</div>

لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت. قاعة المدخل ذات قطر كبير، وهي مصنوعة بشكل مريح ومريح. موريس أو ديام بيلينتسك لوريم لاسينيا الحداد.

أصل للمعلوميات 
<!--[ Blockquote (Style 2) ]-->
<blockquote class='s2'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Anonymous</span>
</blockquote>

الخاتمة

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

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

هنا ينتهي المقال — اشترك لتبدأ رحلتك!

الاشتراك في النشرة البريدية لتصلك أحدث الشروحات في التدوين، البرامج، التطبيقات، الألعاب، قوالب بلوجر، والإضافات المميزة. نقدم لك محتوى متنوعًا في التقنية وصناعة المحتوى والاتصالات.

جميع منشوراتنا محمية بموجب قانون الألفية الرقمية. لذا، يُمنع منعًا باتًا نسخها بأي شكل من الأشكال، وإلا سنتخذ الإجراءات القانونية اللازمة.

عن المؤلف

صدام المرشد
مرحبًا، أنا مدوّن تقني شغوف بصناعة المحتوى الرقمي، أشارككم شروحات ومراجعات في مجالات البرمجة والتكنولوجيا.

إرسال تعليق