شرح سكربت eyger page22 لموقعك

أكثر المواقع ومدونات بلوجر تواجهه مشكلة في مواقع تحليل وفحص الموقع وعند انتهاء تقرير الاكتشاف للأخطاء تجد سرعة الموقع بطيئة وذلك سيئ لأن سرعة الموقع مهمة جدا في تحسين موقعك في محركات البحث ومن ضمن احترام معايير السيو هي سرعة المدونة أو الموقع الخاص بك ، في هذا الشرح سيكون مختلف تماما عن أي طريقة سابقة تعرفت عليها من قبل لزيادة سرعة الموقع الخاص بك عبر سكربت "eyger page22" وتعمل على جميع المواقع مثل WORDPRESS و BLOGGER و HOSTING.

سنشرح التالي

• طريقة تسريع مدونة بلوجر
• طريقة تركيب الكود في قالب بلوجر أو أي موقع
• كود ضغط جميع الصور تلقائيا
• وضع حقوق لوجو أو نص على جميع الصور في الموقع
• كيفية استخدام كود جافاسكريبت لوضع حقوق علي الصور وضغط جميع الصور تلقائيا

كما شاهدت في الصورة السابقة تم وضع لوجو الرسمي لموقع Yehia Online بلون الأصفر في الجانب وليس مظهر خارجي فقط للصورة هذه  صورة حقيقية تم وضع بها logo كحقوق على الصور وحتى إذا تم تنزيلها علي الجهاز أو نظام التشغيل سيتوفر عليها اللوجو للمدونة أو الموقع ولأن الصورة بيضاء اللون الأصفر غير واضح لذلك سيختلف تصميمك في Logo وستختار لون مناسب .

كيف تسريع قالب بلوجر ؟

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

تركيب كود جافاسكريبت في الموقع وبلوجر

1. تأكد من وجود مكتبة jquery لديك أبحث عن jquery.min.js أو jquery.js وإذا لم تجد المسار قم بإضافته أسفل head في أكواد القالب أو الموقع مع أنة بنسبة كبيرة سيكون موجود لديك لأنها مكتبة في javascript مهمة جدا.
2. 
3. قم باستدعاء eyger-page22 من ملف جافاسكريبت وضعها  فوق /body وهذه أهم خطوة لأنها التي تفعل كل شيء لزيادة سرعة موقعك أو مدونتك علي blogger قم بإضافة رابط الاستدعاء عبر الكود التالي :

<script src='https://res.cloudinary.com/dr3osevsp/raw/upload/v1598295125/eyger-page22.js'> </script>

وضع اللوجو أو الشعار الخاص بك علي الصور تلقائيا كحقوق عبر كود جافاسكريبت : 
عبر الكود البرمجي التالي يمكنك إضافة logo على صور مخصصة ومحدد لها class أو id وإذا لم تفهم ما أقصد ستفهم كل شيء في الفقرة التالية فقط يجب التركيز علي ثبيل المثال الكود التالي أسمة copas1 وهو تضع داخلة رابط صورة اللوجو او الشعار الخاص بك التي ستظهر على الصورة.

<script> $(function () { $('.myclass').YehiaOnline({ path: 'https://yourhost/name.png', gravity: 'yn', opacity: 0.7, margin: 12 });}); </script>

في الكود copas1 يضع logo صورة على جميع الصور التي بها class باسم  myclass لذلك يجب عليك في كل صورة تريد وضع الحقوق عليها أن تكتب اسم class مثال علي كود صورة img src='urlimage' class='myclass'
يجب الإلتزام بأبعاد اللوجو الخاص بك وجعل الخلفية شفافة ثم رفع logo ثم الحصول علي رابط الصورة وتبديل link الذي في الكود copas1 إلي رابط صورتك ونوصي بإرتفاع وعرض الصورة يكون صغير مثل 230 في 150 بيكسل .
إذا كنت لا تريد وضع صورة كحقوق على الصور يمكنك إضافة نص إلي الصورة عبر الكود التالي :

<script> $(function () { $('.myclass').YehiaOnline({ text: 'Yehia Online', textWidth: 100, gravity: 'Yn_T', opacity: 1, margin: 12 }); }); </script>

تفعيل الكود علي جميع الصور

يمكنك وضع اللوجو أو النص الخاص بك تلقائيا على جميع الصور الموجودة في الموقع أو المدونة بدون استعمال أو كتابة myclass في كل صورة بشكل منفرد عبر تغيير .myclass إلي img مثال في الصورة التالية :

شرح الأكواد وكيف التحكم بها

• opacity مخصصة إلى شفافية اللوجو على الصور في موقعك مثل 0.7 درجة مناسبة لظهور مناسب وعند التقليل من الرقم 7 ستكون شفافية logo على الصور أقل و 1 تعني شفافية اللوجو غير قليلة وتظهر بوضوح
• margin يعني تغيير مكان الصورة أو النص مثلا 12 تكون بلجانب إذا أصبحت 30 ستتغير مكانها يمكنك التحكم في القيم عبر -20 أو 20

كيف استخدام الكود جافاسكريبت لضغط الصور ووضع الحقوق ؟

كما تعرفت على طريقة زيادة سرعة الموقع أو مدونة بلوجر عبر كود جافاسكريبت لضغط جميع الصور تلقائيا عبر كود برمجي وأيضا وضع صورة لوجو خاص بك كحقوق نشر لك علي موقعك وفي الخطوة الأخيرة من بداية الكود بأسم copas1 يتم وضع الكود فوق /body لتنفيذ ضغط الصور وتقليل حجمها ويتم ضغط الصور على امتداد وصيغة مناسبة مثل png و jpg و jpeg و gif إلي base64 لتشغيل الصور بدون توفر الإنترنت عبر blob .

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

مثال على كود كامل للتجربة .

<!DOCTYPE html> <html> <head> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> <img width='550px' height='350px' src="https://res.cloudinary.com/dr3osevsp/image/upload/v1598240907/Yn_test.png" alt="anas rar" /> <body> <script src='https://res.cloudinary.com/dr3osevsp/raw/upload/v1598295125/eyger-page22.js'></script> <script> $(function () { $('img').YehiaOnline({ path: 'https://res.cloudinary.com/dr3osevsp/image/upload/v1598193463/Yehia__Online_xqenlo.png', gravity: 'yn', opacity: 0.7, margin: 12 });}); </script> </body> </head> </html>

تحديث : إزالة الرابط الإفتراضي في بلوجر علي الصور :

عند إستعمالك السكربت في وضع الحقوق علي الصور ستواجهة مشكلة أن يمكن لسارق الصورة إذا لدية معلومات من قبل يمكنة الضغط علي F12 ويحصل علي رابط الصورة الأصلية التي تكون في الرابط وليست صورة مثال : إذا دخلت إلي مقال لديك في بلوجر وقمت بلضغط علي الصورة سيتم فتح لك نافذة جديدة بها الرابط للصورة لذلك يمكنك تخطي ذلك العقبة مع أنة ليس الكثيير يعرفها لاكن للأمان أكثر قم بإضافة ذلك الكود ضمن الأكواد السابقة داخل script بعد الأكواد وسيتم أزالة روابط الصور الإحتياطية من المقال في blogger مثال :

<script> $("a[imageanchor|='1']").removeAttr("href"); $(function () { $('img').YehiaOnline({ path: 'https://res.cloudinary.com/dr3osevsp/image/upload/v1598193463/Yehia__Online_xqenlo.png', gravity: 'yn', opacity: 0.7, margin: 12 });}); </script>

إذا تستخدم  بلوجر

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

إضافة الأداة

رابط الشرح فيديو