أضافة ميزة التحية اليومية لقوالب بلوجر

تركيب رسالة التحية بداخل المواضيع تتغير بشكل تلقائي حسب الوقت الفعلي

تركيب ميزة التحيات اليومية لقوالب بلوجر

تُعد ميزة "التحية اليومية" إضافة جميلة وتفاعلية في ، حيث تقوم تلقائيًا بعرض رسالة ترحيبية مخصصة للزائر حسب توقيت زيارته للموقع. هذه الميزة تُساهم في:

تحسين تجربة المستخدم: تجعل الزائر يشعر بالترحيب والاهتمام، مما يعزز من تفاعله مع المحتوى.

إضفاء لمسة إنسانية: بدلاً من واجهة جامدة، يتم تقديم تحية دافئة تناسب الصباح أو المساء.

رفع مدة بقاء الزائر في الموقع: كلما شعر الزائر أن الموقع حيّ ومتجدد، زادت احتمالية بقائه وتصفحه أكثر.

احترافية أعلى: تعكس هذه الميزة عناية صاحب المدونة بالتفاصيل واهتمامه بتقديم تجربة رقمية راقية.

هذه الميزة تجدها في بعض القوالب و خاصا قالب Plus UI 

طريقة تركيب الرسالة الترحيبية

بعد الدخول لأكواد القالب قم بالبحث عن  <data:post.body/>  قد تجد اكثر من واحدة يمكنك تجربها جميعا

عندما تجدها الصق الكود التالي اعلاها

          <p id='samay'/>

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

    <script>/*<![CDATA[*/ 

  const hour = new Date().getHours();

  let icon, greeting;

  

  if (hour >= 5 && hour < 12) {

    icon = '<span class="material-icons">wb_sunny</span>';

    greeting = "good morning";

  }

  else if (hour >= 12 && hour < 16) {

    icon = '<span class="material-icons">wb_sunny</span>';

    greeting = "good afternoon";

  }

  else if (hour >= 16 && hour < 20) {

    icon = '<span class="material-icons">nights_stay</span>';

    greeting = "good evening";

  }

  else {

    icon = '<span class="material-icons">nights_stay</span>';

    greeting = "good night";

  }

  document.getElementById("samay").innerHTML = `${icon} ${greeting}`;

//]]>

</script>

          

     <style>

  #samay {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 5px 20px;

    border-radius: 31px;

    border: 1px solid #ffffff;

    background: #e7e7e7;

    color: black;

    font-size: 13px;

    text-transform: capitalize;

  }

       

   #samay .material-icons

 {

    font-family: &#39;Material Icons&#39;;

    font-weight: normal;

    font-style: normal;

    font-size: 18px!important;

    line-height: 1;

    letter-spacing: normal;

    text-transform: none;

    display: inline-block;

    white-space: nowrap;

    word-wrap: normal;

    direction: ltr;

    -webkit-font-feature-settings: &#39;liga&#39;;

    -webkit-font-smoothing: antialiased;

}         

</style>  

و ثم قم بالحفظ

ملاحظة

اذا كانت لديك مكتبة الايقونات ماتريال يمكنك حذف المكتبة من الكود

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

تحرير المقال