كيفية إضافة أداة رساله ترحيب ديناميكية في مدونة بلوجر

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

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

كيفية إضافة تحيات ديناميكية باستخدام JavaScript في Blogger

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

مشاهدة الاداة

خطوات تثبيت الاداة

الخطوة 1 :- قم بتسجيل الدخول لوحة تحكم Blogger.

الخطوة 2 :- الذهب الي " تحرير HTML ".

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

svg{width:16px;height:16px;margin-right:6px}
#greeting .greeting{font-size:14px}
.greeting{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:20px;line-height:20px;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px;box-shadow:-6px -6px 14px rgba(255,255,255,.7),-6px -6px 10px rgba(255,255,255,.5),6px 6px 8px rgba(255,255,255,.075),6px 6px 10px rgba(0,0,0,.15)}
.drK  .greeting{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe}

الخطوة 4 :- ابحث عن </body> والصقه كود Javascript التالي فوقه مباشرةً.

<script type='text/javascript'>/*<![CDATA[*/
 function greetings() {
  var message = "";
  var time = new Date().getHours();

  if (time >= 4 && time < 12) {
    return (message = "صباح الخير :)");
  } else if (time >= 12 && time < 16) {
    return (message = "مساء الخير :)");
  } else if (time >= 16 && time < 19) {
    return (message = "تصبح بخير :)");
  } else {
    return (message = "احلام سعيدة :)");
  }
}

document.getElementById("greeting").innerHTML = greetings();

/*]]>*/</script>

الخطوة 5 :- الآن انسخ كود HTML أدناه والصقه أينما تريد
لان الكود التالي هو المسؤول عن عرض محتوى الأداة.

<div class="greeting" ><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" version="1.1" viewBox="0 0 106.059 106.059"><path d="M90.546 15.518c-20.688-20.69-54.346-20.69-75.03-.005-20.688 20.685-20.686 54.345.002 75.034 20.682 20.684 54.34 20.684 75.026-.004 20.686-20.685 20.684-54.343.002-75.025zm-5.789 69.24c-17.493 17.494-45.961 17.496-63.455.002-17.498-17.497-17.495-45.966 0-63.46 17.494-17.493 45.96-17.495 63.457.002 17.494 17.494 17.492 45.963-.002 63.456zM33.299 44.364h-3.552a.822.822 0 0 1-.82-.817c0-.184.062-.363.175-.507l7.695-9.755c.158-.196.392-.308.645-.308s.486.111.641.304l7.697 9.757c.189.237.229.58.1.859a.822.822 0 0 1-.741.467h-3.554a.59.59 0 0 1-.463-.225l-3.68-4.664-3.681 4.664a.59.59 0 0 1-.462.225zm44.599-1.326a.84.84 0 0 1 .1.859.822.822 0 0 1-.741.467h-3.554a.588.588 0 0 1-.463-.225l-3.681-4.664-3.681 4.664a.59.59 0 0 1-.462.225h-3.552a.822.822 0 0 1-.82-.817c0-.184.062-.363.175-.507l7.695-9.755a.823.823 0 0 1 .645-.308c.254 0 .486.111.642.304l7.697 9.757zm-1.882 21.03c-3.843 8.887-12.843 14.629-22.927 14.629-10.301 0-19.354-5.771-23.064-14.703a3 3 0 1 1 5.54-2.3c2.776 6.686 9.655 11.004 17.523 11.004 7.69 0 14.528-4.321 17.42-11.011a2.999 2.999 0 0 1 3.944-1.563 2.999 2.999 0 0 1 1.564 3.944z"/></svg><span id="greeting"/></div>

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

ينتهي هنا موضوعنا عن "كيفية إضافة أداة رساله ترحيب ديناميكية في مدونة بلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية