إضافة اداة ذات صلة لصفحات AMP HTML

تغيير اللغة🌐

تعد أداة ذات صلة عنصرًا مهمًا في المدونة ، خاصةً Blogger. من خلال عرض أداة ذات صلة ، سيكون عرض المدونة أكثر جاذبية وأنيقًا.

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

إذا كان القالب الخاص بك يعتمد على AMP HTML ، فمن المؤكد أن جافا سكربت ستجعل مدونتك غير صالحة لـAMP. لأن استخدام جافا سكريبت من جهة خارجية غير مسموح به على صفحة AMP

ولكن ، يمكن حل ذلك باستخدام المكون <amp-iframe> وكذلك استضافة الملفات على Github. ويمكنك مشاهدة العرض التوضيحي للمنشور ذات الصلة في نهاية هذه المقالة.

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

افتح إعدادت المدونة ثم ادخل على تحرير النموذج (تعديل HTML) في لوحة معلومات Blogger.com.

تأكد من إضافة مكون <amp-iframe> قبل الرمز </head> لتشغيل أداة ذات صلة لصفحات الجوال المسرعة:-

</head>

إذا لم يكن كذلك ، يرجى نسخ ثم إلصق هذا الرمز فوق الرمز </head> لتشغيل أداة ذات صلة لصفحات الجوال المسرعة:

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>

سسسسسس

انسخ الكود التالي في نهاية المقالة ، أو بعد محدد تذييل القالب. مثال في نموذج Alinux AMP ، فئة التذييل هي معلومات التذييل. لذا أنسخ بعد الكود <div class = 'footer-info'> لكي تشغل أداة ذات صلة لصفحات الجوال المسرعة

<div id='related-post'> <h4 class='relate'>Related Posts </h4> <amp-iframe src='https://cdn.rawgit.com/hafidm93/HTML/0a97af9b/relatedalinux.html?labels= <b:loop values='data:post.labels' var='label'> <data:label.name/> <b:if cond='data:label.isLast != "true"'>, </b:if> </b:loop>&num=6&url=https://www.amp-blogger.com&pos= <data:post.url.canonical/>' frameborder='0' height='420' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-popups'></amp-iframe> </div>

يجب عليك القيام بالآتي

1. قم بتغيير عنوان URL الخاص بـ https: //www.amp-blogger باستخدام عنوان url لمدونتك. إذا لم يتم استبداله ، فسيكون عنصر واجهة المستخدم خطأ ولن تظهر المشاركات ذات الصلة.

2. تأكد من تنشيط SSL / HTTPS على مدونتك، إذا لم تقم بتنشيطه. فادخل إلى اعدادت المدونة ثم قم بالتبديل إلى بادئة HTTPS

3. لإنشاء نمط لـ الأدوات ذات صلة ، انسخ CSS التالية بتنسيق

<style amp-custom='amp-custom'>

ثم الصق الكود التالي داخلة:-

.relate { font-size: 20px; padding-top: 15px; border-bottom: solid 3px #019688; width: 23%; position: relative; margin: 0 0 10px; color: #444; font-weight: 500; letter-spacing: 1px; }

الآن ما عليك سوى إتمام العملية ، احفظ التغييرات التي تم إجراؤها على القالب الخاص بك.

سسسسسسسس

العربية Türkçe English русский