دليل شامل: كيفية إضافة أداة الساعة الرقمية مع التاريخ واليوم لمدونات بلوجر

تعد إضافة العناصر التفاعلية إلى مدونة Blogger من أفضل الطرق لتحسين تجربة المستخدم (UX). فبدلاً من أن تكون المدونة مجرد نصوص جامدة، تضفي أداة الساعة والتاريخ لمسة من الحيوية والتنظيم، خاصة للمدونات الإخبارية أو التقنية التي تهتم بدقة الوقت.

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

لماذا يجب أن تضيف ساعة وتاريخ لمدونتك؟

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

معاينة الإضافة (Live Preview)

هذا هو الشكل الذي ستظهر به الأداة في الشريط الجانبي لمدونتك:

00:00:00

جاري التحميل...

خطوات التركيب بالتفصيل

الدخول للوحة التحكم: سجل دخولك إلى حسابك في Blogger.
التنسيق (Layout): من القائمة الجانبية، اختر قسم "التخطيط".
إضافة أداة: في المكان الذي تفضله (غالباً في Sidebar)، انقر على "إضافة أداة".
نوع الأداة: اختر من القائمة المنبثقة خيار HTML/JavaScript.
لصق الكود: انسخ الكود من الصندوق أدناه وضعه في خانة المحتوى.
الحفظ: انقر على حفظ وقم بمعاينة النتيجة.

كود الأداة (جاهز للنسخ)

قم بنسخ الكود التالي بالكامل ولصقه في مدونتك:

الكود البرمجي - HTML/JS


<style>

.ta-time {

    text-align: center;

    background: #ffffff;

    padding: 15px;

    border-radius: 8px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    font-family: 'Segoe UI', Arial, sans-serif;

}

#ta-hour {

    font-weight: bold;

    display: block;

    font-size: 30px;

    color: #333;

    margin-bottom: 5px;

}

#ta-date {

    font-size: 15px;

    color: #888;

}

</style>

<div class="ta-time">

    <span id="ta-hour"></span>

    <span id="ta-date"></span>

</div>

<script>

setInterval(function() {

    var d = new Date();

    document.getElementById("ta-hour").innerHTML = d.toLocaleTimeString();

}, 1000);

function updateBlogDate() {

    var n = new Date();

    var days = ["الأحد", "الإثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت"];

    var dayName = days[n.getDay()];

    var fullDate = dayName + "، " + n.toLocaleDateString('ar-EG');

    document.getElementById("ta-date").innerHTML = fullDate;

}

updateBlogDate();

</script>

* اضغط داخل الصندوق لتحديد الكود بالكامل ونسخه.

خاتمة وحقوق الملكية

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

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

لمزيد من الإضافات الحصرية، زوروا موقعنا: