مدونة هلا تك

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

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

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

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

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

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

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

هذه الميزة تجدها في بعض القوالب و خاصا قالب ~~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: 'Material Icons';
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: 'liga';
-webkit-font-smoothing: antialiased;
}
</style>

و ثم قم بالحفظ

ملاحظة

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

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

وفي الختام !

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