فتح جميع الروابط الخارجية في علامة تبويب جديدة في بلوجر (جافا سكريبت)
هل تريد أن يتمتع قراء مدونتك بتجربة تصفح أكثر سلاسة؟ بشكل افتراضي، عندما ينقر القراء على الروابط، فإنهم عادةً ما يفتحون في نفس علامة التبويب أو النافذة، مما قد يقطع تدفق القراءة، وخاصةً عندما ينقرون على الروابط المؤدية إلى مواقع ويب خارجية. لحسن الحظ، هناك حل بسيط! باستخدام القليل من كود JavaScript، يمكنك بسهولة إعداد جميع الروابط الخارجية لفتحها في علامات تبويب جديدة.
سترشدك هذه المقالة خلال عملية تنفيذ هذه الوظيفة على مدونتك على Blogger.
فوائد فتح الروابط الخارجية في علامات تبويب جديدة:
- تحسين تجربة المستخدم: يمكن للقراء استكشاف الروابط الخارجية دون مغادرة مدونتك، مما يؤدي في النهاية إلى تجربة أكثر متعة.
- انخفاض معدلات الارتداد: عندما ينقر المستخدمون على رابط خارجي ويفتح في علامة تبويب جديدة، يمكنهم بسهولة العودة إلى مدونتك عن طريق التبديل ببساطة إلى علامة التبويب الأصلية.
- تحسين محرك البحث: تضع محركات البحث تجربة المستخدم في الاعتبار عند تصنيف مواقع الويب. من خلال تقديم تجربة تصفح أكثر سلاسة، قد ترى تأثيرًا إيجابيًا طفيفًا على تحسين محرك البحث الخاص بك.
خطوات فتح جميع الروابط الخارجية في علامة تبويب جديدة (Javascript):
- احتفظ بنسخة احتياطية من القالب (مهم): قبل إجراء أي تغييرات على قالب Blogger، من الضروري إنشاء نسخة احتياطية. يضمن لك هذا إمكانية الرجوع إلى الإصدار السابق إذا حدث خطأ ما. انتقل إلى Template -> Backup/Restore وانقر فوق Download full template.
- الوصول إلى Edit HTML: انتقل إلى Template -> Edit HTML.
- حدد علامة <head>: اضغط على Ctrl+F (أو Command+F على Mac) لفتح شريط البحث واكتب <head>. الصق كود Javascript التالي أسفل علامة <head> مباشرةً:
<script> //<![CDATA[ function openInNewTab(url) { window.open(url, '_blank'); } document.addEventListener("DOMContentLoaded", function() { var links = document.querySelectorAll('a'); for (var i = 0; i < links.length; i++) { if (links[i].href && !links[i].href.startsWith(window.location.origin)) { links[i].addEventListener('click', function(event) { openInNewTab(this.href); event.preventDefault(); }); } } }); //]]> </script>
شرح الكود:
- يحدد هذا الكود openInNewTab تأخذ عنوان URL كمدخل وتفتحه في علامة تبويب جديدة باستخدام window.open(url, '_blank')
- يضمن مستمع الحدث DOMContentLoaded تشغيل الكود فقط بعد تحميل الصفحة بالكامل.
- ثم يقوم بتحديد جميع علامات المرساة (<a>) باستخدام document.querySelectorAll('a').
- يقوم الكود بالتنقل عبر كل رابط ويتحقق مما إذا كانت سمة href (وجهة الرابط) موجودة ولا تبدأ باسم نطاق مدونتك (window.location.origin). وهذا يضمن عدم تأثر الروابط الداخلية (داخل مدونتك).
- إذا كان الرابط خارجيًا، تتم إضافة مستمع حدث إلى الرابط. عندما ينقر المستخدم على الرابط، تفتح دالة openInNewTab الرابط في علامة تبويب جديدة وتمنع السلوك الافتراضي (الذي سيكون فتحه في نفس علامة التبويب) باستخدام event.preventDefault().
الاختبار واستكشاف الأخطاء وإصلاحها:
بمجرد حفظ التغييرات، اعرض مدونتك في نافذة جديدة واختبر بعض الروابط الخارجية. يجب أن تفتح في علامات تبويب منفصلة. إذا واجهت أي مشكلات، فتحقق مرة أخرى من موضع الكود وتأكد من عدم وجود أخطاء مطبعية.
