تعلم طريقة إضافة jQuery في مدونات Blogger مع مثال عملي
سأشرح في درس اليوم كيفية إضافة إضافة مكتبة جي كويري jQuery وتستفيد منها في مدونات بلوجر Blogger و Blogspot.
تعد جي كويري jQuery من المكتبات المفيدة جدًا لمدونتك فهي تمكنك من إضافة التأثيرات والرسوم المتحركة والوظائف الرائعة لمدونتك.
تستخدم معظم مدونات بلوجر بما في ذلك الرسمية منها مكتبة jQuery لتعزيز كفاءة عملها وسلاستها، يبلغ حجم ملف jQuery حوالي 100 كيلوبايت فقط ويمكن تخزينه في الذاكرة المؤقتة، لذا لا داعي للقلق بشأن سرعة صفحتك بعد إدراجه.
ما هي jQuery؟
قبل أن تتعلم كيفية إضافة سكربتات jQuery في قوالب بلوجر دعنا نوضح ماهي مكتبة jQuery نفسها.
ببساطة، jQuery هي مكتبة جافا سكريبت مفتوحة المصدر وخفيفة الوزن تُبسط طريقة كتابة واستخدام لغة البرمجة هذه.
تتيح لك jQuery تعديل وتحسين قوالب بلوجر بسهولة باستخدام جافا سكريبت. هذه الميزة يمكن أن تكون مفيدة للغاية لأن جافا سكريبت ضرورية للعديد من الميزات.
على سبيل المثال، تحتاج إلى جافا سكريبت من أجل Ajax ومعالجة الأحداث والتعامل مع DOM.
أهمية مكتبة jQuery
قد تتساءل لماذا تحتاج إلى إضافة ملف إضافي بحجم 100 كيلوبايت إلى مدونتك، ولكن صدقنا، هذا أمر مهم وضروري جدًا لمدونتك. العديد من الإضافات الشائعة تعمل بمساعدة مكتبة jQuery، مثل "قراءة المزيد تلقائيًا"، و"أداة آخر المنشورات"، و"أداة آخر المنشورات بناءً على التصنيفات"، و"أداة المنشورات العشوائية"، و"شريط الأخبار"، و"العودة إلى الأعلى" والعديد من الإضافات الأخرى. كما أنها تساعد في إنشاء تأثيرات رائعة وسلسة لا يمكن تحقيقها باستخدام CSS فقط.
إضافة كود جي كويري jQuery
لإدراج jQuery، كل ما عليك الوصول إلى قالب مدونتك والنقر على تحرير HTML.
الآن، هذا هو الجزء الأكثر أهمية في الدرس ويجب عليك القيام به بحذر شديد. في القالب، ابحث عن وسم </head> والصق فوقه مباشرةً كود HTML التالي:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha384-xxxxxx" crossorigin="anonymous"></script>يقوم هذا الكود بتضمين أحدث إصدار من مكتبة jQuery في مدونتك، ويجب استبدال "sha384-xxxxxx" بقيمة integrity الحقيقية التي يمكن العثور عليها في مواقع مثل jQuery CDN.
استخدام الخاصية (Subresource Integrity) يساعد المتصفح على التحقق من أن المكتبة لم تتعرض للتلاعب من طرف ثالث.
هذا الإصدار هو الأحدث حاليًا (3.7.1) وهو متاح للاستخدام في مدونتك لضمان الأداء السلس والوظائف الحديثة. يمكنك العثور على المزيد من المعلومات حول الإصدارات الأحدث وكيفية تضمينها عبر زيارة .
ملاحظة: من الضروري وجود مكتبة jQuery واحدة فقط، فوجود أكثر من واحدة سيتسبب في حدوث تعارضات.
إليك مثالاً عملياً يستخدم مكتبة jQuery لإضافة تأثير زر "العودة إلى الأعلى" في قالب مدونة Blogger. هذا الزر يسمح للزوار بالعودة إلى أعلى الصفحة بنقرة واحدة، وهو مفيد لتحسين تجربة المستخدم.
الخطوات:
إدراج مكتبة jQuery: أولاً، يجب عليك التأكد من إدراج مكتبة jQuery في قالب مدونتك.
إضافة HTML للزر: بعد ذلك، أضف كود HTML للزر.
إضافة CSS لتصميم الزر: لتصميم الزر وضبط موضعه.
إضافة jQuery لتحريك الزر: لإظهار وإخفاء الزر والتحكم في سلوكه.
الكود:
1. إدراج مكتبة jQuery
أضف الكود التالي قبل وسم </head> في قالب مدونتك:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>2. إضافة HTML للزر
أضف الكود التالي داخل وسم <body> في قالب مدونتك، حيث تريد ظهور الزر:
<a href="#" id="back-to-top" title="Back to top">↑</a>3. إضافة CSS لتصميم الزر
أضف الكود التالي داخل وسم <head> في قالب مدونتك داخل وسم <style> لتصميم الزر:
<style>
#back-to-top {
position: fixed;
bottom: 40px;
right: 40px;
display: none;
width: 50px;
height: 50px;
background-color: #007BFF;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 24px;
border-radius: 50%;
z-index: 1000;
cursor: pointer;
}
#back-to-top:hover {
background-color: #0056b3;
}
</style>4. إضافة jQuery لتحريك الزر
أضف الكود التالي قبل وسم </body> في قالب مدونتك داخل وسم <script> لتحريك الزر:
<script>
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>الخلاصة
تعلمت اليوم كيفية إضافة مكتبة jQuery في مدونات Blogger و Blogspot وتعرفت على مثال عملي لتطبيقها في إضافة زر "العودة إلى الأعلى" يعمل بشكل جميل في مدونتك، مما يحسن تجربة المستخدم ويسهل التنقل. يمكنك تعديل الأنماط والألوان حسب رغبتك لضمان أن يتناسب الزر مع تصميم مدونتك.
