اضافة قطعة ويدجت ساعة رقمية للموقع

هذا الموضوع يتناول أهمية استخدام الكود البرمجي والويدجتات في تخصيص مواقع الويب. يسلط الضوء على كيفية إضافة وظائف مخصصة وتحسين تجربة المستخدم من خلال الأكواد CSS وJavaScript والويدجتات في منصة بلوجر. كما يوضح الوضعين المختلفين لوضع الأكواد HTML في تخصيص التصميم والمشاركات. الهدف هو تمكين المطورين وأصحاب المواقع من تحسين وتخصيص مواقعهم بشكل فعال واحترافي باستخدام البرمجة.

اضافة قطعة ويدجت ساعة رقمية للموقع

السلام عليكم ورحمة الله وبركاته

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

---

إضافة أنماط CSS لتخصيص مدونتك

أحد أهم جوانب تخصيص مدونتك على بلوجر هو إضافة أنماط CSS. يمكنك القيام بذلك بسهولة واحترافية عن طريق وضع كود CSS في مكان محدد في قالب مدونتك. قد ترغب في وضعه فوق ]]></b:skin>.

تحسين وظائف مدونتك باستخدام الكود البرمجي

لتعزيز وظائف مدونتك، يمكنك إضافة كود JavaScript بسهولة. يُفضل وضعه فوق </body> في قالب مدونتك. هذا سيضمن تحميل صفحة المدونة بسرعة ودون تأخير.

معاينة في صِوانᴜɴPʟᴜɢ

تخصيص تخطيط مدونتك باستخدام الكود HTML

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

---

لخطوات البسيطة لوضع كود CSS بشكل احترافي

<style>.ta-time{text-align:center;}
#ta-hour{font-weight:400;display:block;font-size:30px;margin: 0 0 5px;letter-spacing:5px;}</style>

لوضع كود CSS بشكل احترافي في قالب مدونتك، قم بالبحث عن <b:skin> داخل قالبك وقم بلصق الشيفرة البرمجية داخله. يمكنك استخدام القواعد CSS لتخصيص التصميم.

1. أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى لوحة التحكم بلوجر. وانتقل إلى "المظهر" .
2. انقر فوق رمز السهم هذا بجوار الزر "تخصيص".
3. ابحث عن العلامة ]]></b:skin> داخل محرر القالب. هذا هو المكان الذي يجب وضع الكود CSS فوقه.
4. انسخ والصق كود CSS الذي تريده فوق ]]></b:skin>.
5. بمجرد لصق الكود، احفظ التغييرات بالنقر فوق هذا الرمز

كيفية وضع كود JavaScript بشكل احترافي في مدونتك

<script>var myVar = setInterval(function() {
    myTimer()
}, 1000);
function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("ta-hour").innerHTML = t;
}
n = new Date();
if (n.getTimezoneOffset() == 0) t = n.getTime() + (7 * 60 * 60 * 1000);
else t = n.getTime();
n.setTime(t);
var dn = new Array("الأحد", "لإثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت");
d = n.getDay();
m = n.getMonth() + 1;
y = n.getFullYear()
var date = dn[d] + ", " + (n.getDate() < 10 ? "0" : "") + n.getDate() + "/" + (m < 10 ? "0" : "") + m + "/" + y;
document.getElementById("ta-date").innerHTML = date;</script>

لوضع كود JavaScript بشكل احترافي، يُفضل وضعه فوق </body> في قالب مدونتك. هذا سيساعد في تحميل صفحة المدونة بشكل فعال وتجنب تأخير العرض.

1. أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى لوحة التحكم بلوجر. وانتقل إلى "المظهر" .
2. انقر فوق رمز السهم هذا بجوار الزر "تخصيص".
3. ابحث عن العلامة </body> داخل محرر القالب. هذا هو المكان الذي يجب وضع الكود CSS فوقه.
4. انسخ والصق كود CSS الذي تريده فوق </body>.
5. بمجرد لصق الكود، احفظ التغييرات بالنقر فوق هذا الرمز

تخصيص تخطيط مدونتك بسهولة باستخدام الكود HTML

<b:if cond='data:view.isPost'>
<div class='clpN'>
  <center>
<div class="ta-time">
  <span id="ta-hour"></span>
  <span id="ta-date"></span>
</div>
    </center>
</div>

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

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

إضافة الكود HTML من خلال التخطيط (Layout)

1. تسجيل الدخول إلى حساب بلوجر:
   أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
2. انتقاء التخطيط (Layout):
   انتقِ التصميم الذي ترغب في تحريره من خلال الذهاب إلى "التخطيط" أو "Layout" في لوحة التحكم.
3. إضافة وحدة (Widget) HTML/JavaScript:
   - في القسم الذي ترغب فيه في إضافة الكود HTML، انقر على "إضافة وحدة" أو "Add a Gadget".
4. اختيار وحدة HTML/JavaScript:
   - من القائمة التي تظهر، اختر HTML/JavaScript.
5. إضافة الكود HTML والسكريبت:
   - في النافذة الجديدة، قم بلصق الكود HTML الذي ترغب في إضافته في مربع النص.
   - إذا كنت بحاجة إلى إضافة أي كود JavaScript، يمكنك وضعه أيضًا في نفس المربع.
6. تخصيص الإعدادات (اختياري):
   - يمكنك تخصيص إعدادات الوحدة وتحديد عرضها ووضعها بالشكل المناسب في التخطيط.
7. حفظ التغييرات:
   - بمجرد إضافة الكود وتخصيص الإعدادات حسب الحاجة، لا تنسى حفظ التغييرات.
8. معاينة ونشر التصميم:
   - قبل أن تبدأ في تشغيل التصميم بالكامل، قد ترغب في معاينة كيف سيظهر على المدونة. بعد التأكد من النتائج، يمكنك نشر التصميم بالنقر على "نشر" أو "تحديث".

---

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

إضافة الكود HTML من خلال مشاركة (Post):

1. تسجيل الدخول إلى حساب بلوجر:
   قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
2. الذهاب إلى قسم المشاركات (Posts):
   انتقِ المدونة التي تريد تحرير مقالها وانقر على "المشاركات" أو "Posts" في لوحة التحكم.
3. تحرير المقالة أو إنشاء مقالة جديدة:
   -توجه الى المشاركات وقم بإنشاء مشاركة جديدة او توجه الصفحات و انشئ صفحة جديدة تم غير من وضع الانشاء المشار اليه بايقونة الى وضع الترميز <html> المشار اليه بايقونة في داخل وقم باستعمال الترميز html اعلاه.
4. وضع الكود HTML:
   - في محرر المقالة، قم بوضع الكود HTML الذي ترغب في إضافته في المكان الذي تريده داخل المقالة.
5. حفظ التغييرات:
   - بعد وضع الكود HTML بالشكل المطلوب، لا تنسى حفظ المقالة.
6. معاينة ونشر المقالة:
   - قبل أن تنشر المقالة بالكامل، يفضل معاينتها أولاً للتحقق من كيفية ظهور الكود HTML. انقر على "معاينة" أو "Preview" للتحقق من النتائج.
   - بعد التأكد من النتائج، قم بنشر المقالة بالنقر على "نشر" أو "Publish".

---

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

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

منشورات ذات صل

شرح الكود CSS

في الكود CSS، تتم استخدام القواعد لتنسيق وتخصيص عناصر HTML على الصفحة. هذا الجزء يبدأ بتعريف القاعدة ".ta-time" التي تطبق تنسيق معين على العناصر التي لها فئة "ta-time". ثم يتم تعريف القاعدة "#ta-hour" لتخصيص النص داخل العنصر الذي يحمل معرف "ta-hour". يتضمن هذا تحديد النص بالوسط وتغيير الخط وحجم الخط وتباعد الأحرف.

شرح الكود HTML

الكود HTML يتعلق بتوسيع هيكل صفحة الويب وتحديد كيف يتم عرض المحتوى. في هذا الكود، هناك عنصر مشهد بالإضافة إلى العناصر span التي تحمل معرفي "ta-hour" و "ta-date". يتم تطبيق الكلاس "ta-time" على العناصر المشهدة لتوجيه تنسيق CSS الذي تم تحديده في الفقرة السابقة.

شرح الكود JavaScript

الكود JavaScript يقوم بتحديث الوقت والتاريخ بشكل دوري على الصفحة. يتم ذلك باستخدام setInterval() لتنفيذ myTimer() كل ثانية. تقوم myTimer() بالحصول على الوقت الحالي وتحويله إلى نص ثم عرضه داخل العنصر الذي يحمل معرف "ta-hour". بالإضافة إلى ذلك، يتم حساب التوقيت بالتوقيت العالمي القياسي (UTC) وتحويله إلى التوقيت المحلي للزائر للعرض. أخيرًا، يتم عرض اليوم والتاريخ في العنصر الذي يحمل معرف "ta-date". تمثل هذه العمليات كيفية تحديث الصفحة بالوقت والتاريخ الحالي بواسطة الكود JavaScript.

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
SiwaneXYZ©
https://www.siwane.xyz/2023/11/add-digital-clock-widget-to-site.html