قصص الويب ستوري: كيفية إضافتها على مدونة بلوجر

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

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

الاصدار AMP المعتمد في قالب Plus UI الاصدارات التاليى 2.7 و 3.0.0 و 3.1.0 الحالي غير مستقر من المحتمل ان تواجه بعض المشاكل ادا قمت بتخصيص القالب دون دراية ببصمة القالب و طريقة تكويده.

ما هي قصص الويب؟

قصص الويب هي محتوى مرئي يتكون من مجموعة من الصفحات التي تحتوي على نصوص وصور وفيديوهات، وتُعرض بطريقة تفاعلية. يمكن للمستخدمين التمرير أو النقر للانتقال بين الصفحات، مما يجعل هذه القصص تجربة ممتعة وسهلة الاستهلاك. تم تطوير هذه الميزة من قبل جوجل، وتدعمها تقنية AMP (Accelerated Mobile Pages)، مما يضمن تحميلها بسرعة على الأجهزة المحمولة.

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

الإصدار غير المستقر من AMP Lite

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

كيفية إضافة قصص ويب إلى مدونة بلوجر

1. إعداد البيئة

قبل البدء في إنشاء قصص ويب، يجب التأكد من أن بيئة بلوجر لديك مهيأة بشكل صحيح. تأكد من تمكين "AMP Lite" و"Story" من Theme Designer لتتمكن من استخدام ميزات AMP. هذه الخطوة ضرورية لضمان تشغيل القصص بشكل صحيح على مدونتك.

2. إنشاء قصة ويب

لإنشاء قصة ويب، ستحتاج إلى نموذج HTML يحتوي على الوسوم اللازمة. إليك نموذج أساسي يمكنك استخدامه:

<!--[ يحدد بشكل صريح الصورة المصغرة للنشر ]-->
<!--[
  <div class='separator'><img src='https://cdn.siwane.xyz/IMG/amp-story.webp'/></div>
]-->

<!--[
  AMP Story هي ميزة تجريبية ولازالت غير مستقرة  في الإصدار 2.7 الى الاصدار (3.1.0) تتيح لنا استخدام amp-story والعلامات المقابلة لإنشاء قصة ويب
  هذا مثال HTML لاستخدام هذه الميزة
  لاحظ أن الرموز التالية معقدة للغاية وتحتاج إلى معرفة متعمقة باستخدام علامات amp Story html.
  كيف يمكنني تفعيل قصة الويب؟
  تأكد من تمكين "AMP Lite" و"Story" من Theme Designer
  الآن، أنشئ مشاركة او صفحة تابثة من الضروري تسمية العنوان exampl-story مثلا my-story وتأكد من أن الرابط الثابت الخاص باي منهما ينتهي بـ -story.html، على سبيل المثال عند معاينة القصة يجب ان تظهر اخرها بهذا التنسيق: my-story.html
  قم بالتاكد من ان للمشاركة تسمية تصنيف (علامة) "amp-story"
  ارجع الآن إلى مستندات قصة الويب الخاصة بـ AMP لإنشاء صفحاتك الخاصة.
]-->

<!--[ Cover page ]-->
<amp-story standalone
    title='قصص ويب ممتعة'
    publisher='دروس AMP'
    publisher-logo-src='assets/AMP-Brand-White-Icon.svg'
    poster-portrait-src='assets/cover.jpg'>
  <amp-story-page id='cover' auto-advance-after="7s">
    <amp-story-grid-layer template='fill'>
      <amp-img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYa7Z-fzDehRRCVh9VGPqcxGzIkQ2gWqQ0-UW5HrerwIH2bWxqxHJ0-GWSvqyDcU1M0LUN5o284HALiwrgZd9nKfvho4nTuysTISUghVfXiVsT9ry3o0t2LdcG4jxcfvw4B3Edg8eBKcXSFqntVwXTfMr2J0UC198Nuj_fF34BtNz0zl3L53fPNmfsVI/s540/narrow-screen.png'
          width='540' height='720'
          layout='responsive'>
      </amp-img>
    </amp-story-grid-layer>
    <amp-story-grid-layer template='vertical'>
      <h1>قصص ويب ممتعة</h1>
      <p>بواسطة دروس AMP</p>
    </amp-story-grid-layer>
  </amp-story-page>

  <!--[ Page 1 (Introduction): 1 layer (vertical) ]-->
  <amp-story-page id='page1'>
    <amp-story-grid-layer template='vertical'>
      <h1>مقدمة عن قصص الويب</h1>
      <amp-img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYa7Z-fzDehRRCVh9VGPqcxGzIkQ2gWqQ0-UW5HrerwIH2bWxqxHJ0-GWSvqyDcU1M0LUN5o284HALiwrgZd9nKfvho4nTuysTISUghVfXiVsT9ry3o0t2LdcG4jxcfvw4B3Edg8eBKcXSFqntVwXTfMr2J0UC198Nuj_fF34BtNz0zl3L53fPNmfsVI/s540/narrow-screen.png'
          width='540' height='720'
          layout='responsive'>
      </amp-img>
      <q>قصص الويب تمنحك تجربة غامرة وممتعة.</q>
    </amp-story-grid-layer>
  </amp-story-page>

  <!--[ Page 2 (Benefits): 2 layers (fill + thirds) ]-->
  <amp-story-page id='page2'>
    <amp-story-grid-layer template='fill'>
      <amp-img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYa7Z-fzDehRRCVh9VGPqcxGzIkQ2gWqQ0-UW5HrerwIH2bWxqxHJ0-GWSvqyDcU1M0LUN5o284HALiwrgZd9nKfvho4nTuysTISUghVfXiVsT9ry3o0t2LdcG4jxcfvw4B3Edg8eBKcXSFqntVwXTfMr2J0UC198Nuj_fF34BtNz0zl3L53fPNmfsVI/s540/narrow-screen.png' 
          width='540' height='720'
          layout='responsive'>
      </amp-img>
    </amp-story-grid-layer>
      <amp-story-grid-layer template='thirds'>
        <h1 grid-area='upper-third'>فوائد قصص الويب</h1>
        <p grid-area='lower-third'>قصص الويب تساعد في جذب انتباه القارئ وتوفير تجربة تفاعلية أكثر.</p>
    </amp-story-grid-layer>
  </amp-story-page>

  <!--[ Page 5 (Collage): 2 layers + animations ]-->
  <amp-story-page id='page5'>
    <amp-story-grid-layer template='vertical' class='noedge'>
      <div class='wrapper'>
        <amp-img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYa7Z-fzDehRRCVh9VGPqcxGzIkQ2gWqQ0-UW5HrerwIH2bWxqxHJ0-GWSvqyDcU1M0LUN5o284HALiwrgZd9nKfvho4nTuysTISUghVfXiVsT9ry3o0t2LdcG4jxcfvw4B3Edg8eBKcXSFqntVwXTfMr2J0UC198Nuj_fF34BtNz0zl3L53fPNmfsVI/s540/narrow-screen.png'
            width='540' height='720'
            layout='responsive'
            animate-in='fade-in'
            animate-in-delay='0.4s'>
        </amp-img>
        <amp-img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYa7Z-fzDehRRCVh9VGPqcxGzIkQ2gWqQ0-UW5HrerwIH2bWxqxHJ0-GWSvqyDcU1M0LUN5o284HALiwrgZd9nKfvho4nTuysTISUghVfXiVsT9ry3o0t2LdcG4jxcfvw4B3Edg8eBKcXSFqntVwXTfMr2J0UC198Nuj_fF34BtNz0zl3L53fPNmfsVI/s540/narrow-screen.png'
            width='540' height='720'
            layout='responsive'
            animate-in='fade-in'
            animate-in-delay='0.6s'>
        </amp-img>
        <amp-img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYa7Z-fzDehRRCVh9VGPqcxGzIkQ2gWqQ0-UW5HrerwIH2bWxqxHJ0-GWSvqyDcU1M0LUN5o284HALiwrgZd9nKfvho4nTuysTISUghVfXiVsT9ry3o0t2LdcG4jxcfvw4B3Edg8eBKcXSFqntVwXTfMr2J0UC198Nuj_fF34BtNz0zl3L53fPNmfsVI/s540/narrow-screen.png'
            width='540' height='720'
            layout='responsive'
            animate-in='fade-in'
            animate-in-delay='.8s'>
        </amp-img>
        <amp-img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYa7Z-fzDehRRCVh9VGPqcxGzIkQ2gWqQ0-UW5HrerwIH2bWxqxHJ0-GWSvqyDcU1M0LUN5o284HALiwrgZd9nKfvho4nTuysTISUghVfXiVsT9ry3o0t2LdcG4jxcfvw4B3Edg8eBKcXSFqntVwXTfMr2J0UC198Nuj_fF34BtNz0zl3L53fPNmfsVI/s540/narrow-screen.png'
            width='540' height='720'
            layout='responsive'
            animate-in='fade-in'
            animate-in-delay='1s'>
        </amp-img>
      </div>
    </amp-story-grid-layer>
    <amp-story-grid-layer template='vertical' class='center-text'>
      <p class='banner-text' animate-in='whoosh-in-right'>قصص الويب تجلب لك المتعة والمعرفة!</p>
    </amp-story-grid-layer>
  </amp-story-page>
  
  <!--[ Page 2 (Conclusion): 2 layers (fill + thirds) ]-->
  <amp-story-page id='page6'>
    <amp-story-grid-layer template='fill'>
      <amp-img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYa7Z-fzDehRRCVh9VGPqcxGzIkQ2gWqQ0-UW5HrerwIH2bWxqxHJ0-GWSvqyDcU1M0LUN5o284HALiwrgZd9nKfvho4nTuysTISUghVfXiVsT9ry3o0t2LdcG4jxcfvw4B3Edg8eBKcXSFqntVwXTfMr2J0UC198Nuj_fF34BtNz0zl3L53fPNmfsVI/s540/narrow-screen.png' 
          width='540' height='720'
          layout='responsive'>
      </amp-img>
    </amp-story-grid-layer>
      <amp-story-grid-layer template='thirds'>
        <h1 grid-area='upper-third'>استنتاج</h1>
        <p grid-area='lower-third'>قصص الويب تمثل وسيلة رائعة للتواصل مع الجمهور.</p>
    </amp-story-grid-layer>
    <amp-story-page-outlink layout="nodisplay">
      <a role="link" target="_top" href="ضع_الرابط_هنا" rel="nofollow">اكتشف المزيد</a>
    </amp-story-page-outlink>
  </amp-story-page>
</amp-story>

هناك بعض العناصر يمكن اهمالها مثلا :

<style amp-custom>
  body { background-color: #f0f0f0;}
  h1 { font-family: Arial, sans-serif;}
</style>

او يمكنك استبداله

<!-- باستخدام AMP -->
<amp-img src="image.jpg" width="600" height="400" layout="responsive">
<!-- المحتوى هنا -->
</amp-img>
<div style="background-image: url('image.jpg'); width: 100%; height: 200px;">
<!-- المحتوى هنا -->
</div>

لن اطرق لجميع التخصيصات ستحتاج ان تتابع التخصيص من الموقع الرسمي التابع لجوجل AMP.dev

معاينة

شرح مفصل لجميع العناصر الموجودة في الكود المعطى

: تعليق يوضح أن الجزء التالي من الكود يتعلق بتعيين صورة المصغرات للمنشور.
: هذه تعليقات تفصيلية تشرح كيفية استخدام ميزة قصص الويب (AMP Story) في إصدار محدد، وتوجهات حول تفعيلها وكيفية إعدادها.

الهيكل العام لقصص الويب

<amp-story standalone>: هذا هو عنصر جذر القصة، ويحدد أن هذه القصة تعمل بشكل مستقل. يحتوي على خصائص مثل:
- title: عنوان القصة.
- publisher: اسم الناشر.
- publisher-logo-src: مصدر الشعار الخاص بالناشر.
- poster-portrait-src: صورة الغلاف للقصة.

الصفحات داخل القصة

<amp-story-page>: يمثل صفحة فردية داخل القصة. كل صفحة يمكن أن تحتوي على محتوى مختلف.

صفحة الغلاف

<amp-story-page id='cover' auto-advance-after="7s">: صفحة الغلاف، حيث يتم تعيينها للانتقال التلقائي بعد 7 ثوان.
- <amp-story-grid-layer template='fill'>: طبقة تحتوي على صورة الخلفية.
- <amp-img>: عنصر صورة يستخدم لعرض صورة الغلاف.
- <amp-story-grid-layer template='vertical'>: طبقة عمودية تحتوي على نص العنوان والمعلومات.

الصفحات الأخرى

الصفحة 1 (مقدمة): تحتوي على عنوان مقدمة عن قصص الويب وصورة مع اقتباس.
الصفحة 2 (الفوائد): تحتوي على صورة وخاصية template='thirds' لتقسيم المحتوى إلى ثلاثة أقسام: عنوان، ونص.
الصفحة 5 (الكولاج): تحتوي على عدة صور مع تأثيرات حركة (animate-in) لتقديم الصور بشكل تفاعلي. النص في هذه الصفحة يبرز أهمية قصص الويب.
الصفحة 6 (الاستنتاج): تحتوي على صورة وخاصية template='thirds'، حيث يتم وضع عنوان ونص في مناطق محددة. تشمل أيضًا رابطًا خارجيًا.

عناصر إضافية

amp-story-grid-layer: يُستخدم لتنظيم المحتوى داخل الصفحة. يمكن أن يحتوي على صور، نصوص، أو حتى عناصر تفاعلية.
animate-in وanimate-in-delay: خصائص تُستخدم لتطبيق تأثيرات الحركة على الصور عند عرضها.
amp-story-page-outlink: عنصر يستخدم لإنشاء رابط خارجي، مما يسمح للمستخدمين بالتوجه إلى صفحة أخرى.

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

3. تخصيص المحتوى

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

كيفية إضافة فيديوهات إلى قصص ويب

1. إضافة فيديو

لزيادة تفاعل القصة، يمكنك استخدام عنصر <amp-video> لإضافة فيديو. إليك كيفية القيام بذلك:

<amp-story-page id="page2">
  <amp-story-grid-layer template="fill">
    <amp-video src="رابط_الفيديو.mp4" width="540" height="720" layout="responsive" controls>
      <p>متصفحك لا يدعم الفيديو.</p>
    </amp-video>
  </amp-story-grid-layer>
</amp-story-page>

src: رابط الفيديو.
controls: يعرض عناصر التحكم في الفيديو.
layout: يحدد كيفية عرض الفيديو مثل responsive.

2. إضافة تأثيرات على الفيديو

يمكنك تطبيق تأثيرات مماثلة على الفيديوهات باستخدام animate-in:

<amp-video src="رابط_الفيديو.mp4" width="540" height="720" layout="responsive" 
           animate-in="fade-in" animate-in-delay="0.6s" controls>
    <p>متصفحك لا يدعم الفيديو.</p>
</amp-video>

كيفية تنظيم المحتوى

1. استخدام طبقات متعددة

يمكنك استخدام عدة طبقات داخل صفحة واحدة لتنظيم المحتوى بشكل أفضل. إليك مثال على صفحة تحتوي على صورة وفيديو:

<amp-story-page id="page3">
  <amp-story-grid-layer template="fill">
    <amp-img src="رابط_الصورة.jpg" width="540" height="720" layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <amp-video src="رابط_الفيديو.mp4" width="540" height="720" layout="responsive" controls>
      <p>متصفحك لا يدعم الفيديو.</p>
    </amp-video>
  </amp-story-grid-layer>
</amp-story-page>

نصائح إضافية

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

بهذه الخطوات، يمكنك إنشاء قصص ويب غنية بالمحتوى المرئي والتفاعلي باستخدام AMP.

كيفية إضافة صور وتأثيرات وفيديوهات لقصص ويب باستخدام AMP

كيفية إضافة صور إلى قصص ويب

1. إضافة صورة بسيطة

لإضافة صورة إلى قصة ويب، يمكنك استخدام عنصر <amp-img>. إليك كيفية القيام بذلك:

<amp-story-page id="page1">
  <amp-story-grid-layer template="fill">
    <amp-img src="رابط_الصورة.jpg" width="540" height="720" layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>

src: رابط الصورة.
width و height: أبعاد الصورة.
layout: يحدد كيفية عرض الصورة (مثل responsive لجعلها تتكيف مع حجم الشاشة).

2. إضافة تأثيرات على الصور

يمكنك إضافة تأثيرات حركة إلى الصور باستخدام خصائص animate-in و animate-in-delay. إليك مثال:

<amp-img src="رابط_الصورة.jpg" width="540" height="720" layout="responsive" 
         animate-in="fade-in" animate-in-delay="0.4s">
</amp-img>

animate-in: يحدد نوع التأثير (مثل fade-in).
animate-in-delay: يحدد الوقت الذي يجب الانتظار فيه قبل تطبيق التأثير.

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

خطوات إنشاء مشاركة أو صفحة ثابتة على بلوجر

تسجيل الدخول إلى بلوجر:
قم بزيارة موقع بلوجر وسجل الدخول باستخدام حساب جوجل الخاص بك.
اختيار المدونة:
إذا كان لديك عدة مدونات، اختر المدونة التي ترغب في إضافة المشاركة أو الصفحة الثابتة إليها.
إنشاء مشاركة جديدة أو صفحة ثابتة:
اضغط على زر "مشاركة جديدة" أو "New Post" لإنشاء مشاركة، أو انتقل إلى "الصفحات" (Pages) واضغط على زر "صفحة جديدة" لإنشاء صفحة ثابتة.
إضافة عنوان المشاركة أو الصفحة:
في حقل "العنوان"، أدخل my-amp-story، لكي تكون نهاية الرابط المقصود my-amp-story.html.
تهيئة محرر النص بلوجر
- في عرض محرر المنشورات، انقر فوقالأيقونة في أسفل يمين العنوان.
- ستظهر خيارين: عرض HTML وعرض الكتابة .
- يختار 'عرض HTML".
- انسخ ولصق كود المكون في أي مكان تريد إضافته فيه وقم بإجراء التغييرات المناسبة.
كتابة المحتوى:
في حقل النص، ابدأ بكتابة المحتوى. يمكنك استخدام أدوات التنسيق المتاحة مثل إضافة الصور، الروابط، الاقتباسات، وما إلى ذلك.
إضافة عناصر متعددة:
يمكنك إضافة صور وفيديوهات ووسائط متعددة من خلال الأزرار الموجودة في محرر النص.
إعدادات المشاركة أو الصفحة:
قم بضبط إعدادات المشاركة أو الصفحة، مثل إضافة التصنيف amp-story وتاريخ النشر.

الاصدارات 2.7 و 3.0.0 لا تدعم قصص ويب في صفحات تابثة

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

4. اختبار القصة

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

5. نشر القصة

بمجرد الانتهاء من إعداد القصة واختبارها، يمكنك النقر على ايقونة لنشر القصة على مدونتك. تأكد من أن الرابط الثابت الخاص بالقصة ينتهي بـ -story.html. على سبيل المثال، يمكنك استخدام رابط مثل my-story.html.

6. تحسين محركات البحث

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

من المهم اختبار القصة في النتائج الغنية و صحة اصدار amp و ايضا فحص هل قصة ويب صالحة و من المهم ايضا فحص صفحة القصة في جوجل كونصل لتصحيح اي اخطاء محتملة.

7. التفاعل مع الجمهور

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

فوائد استخدام قصص الويب

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

ما هي قصص الويب؟

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

كيف يمكنني إنشاء قصة ويب؟

لإنشاء قصة ويب، يجب عليك استخدام منصات تدعم هذه التقنية مثل Instagram أو Facebook Stories، أو أدوات تطوير مثل HTML5 وCSS وJavaScript لدمج الصور والنصوص والفيديو ضمن واجهة تفاعلية.

ما هي الفوائد الرئيسية لقصص الويب؟

قصص الويب تساعد في جذب الانتباه بسرعة، وتحسين التفاعل مع الجمهور، وزيادة معدلات المشاركة عبر تقديم محتوى مرئي ممتع ومباشر.

هل يمكن استخدام قصص الويب للأغراض التجارية؟

نعم، يمكن استخدامها بشكل فعال في التسويق الرقمي والإعلانات لزيادة الوعي بالعلامات التجارية، والتفاعل مع العملاء بشكل مبتكر، وتنظيم الحملات الترويجية.

مخطط ساقوم بانشاء اداة توليد كود خاص بقصص الويب متوافق بشكل كامل مع قالب Plus Ui اخبرك اذا كنت مهتم بميزة قصص الويب اترك تعليقا و سارد على اي استفسار و اذا تطلب الامر ساقدم دعما فعليا لانشاء اول قصة ويب خاصة بك.

الخاتمة

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

معلومات! استمتع بتجربة عرض القصص التفاعلية عبر ويب ستوري! تقدم هذه التقنية محتوى سريع التحميل وسلس، مما يضمن لك تجربة مشاهدة مثيرة وجذابة على جميع الأجهزة. تأكد من أنك تستخدم المتصفح الأحدث للحصول على أفضل أداء وتجربة تفاعلية في القصص.

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

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

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

مشاركات ذات صلة

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

قصص الويب ستوري: كيفية إضافتها على مدونة بلوجر

ما هي قصص الويب؟

الإصدار غير المستقر من AMP Lite

كيفية إضافة قصص ويب إلى مدونة بلوجر

1. إعداد البيئة

2. إنشاء قصة ويب

شرح مفصل لجميع العناصر الموجودة في الكود المعطى

التعليقات

الهيكل العام لقصص الويب

الصفحات داخل القصة

صفحة الغلاف

الصفحات الأخرى

عناصر إضافية

3. تخصيص المحتوى

كيفية إضافة فيديوهات إلى قصص ويب

1. إضافة فيديو

2. إضافة تأثيرات على الفيديو

كيفية تنظيم المحتوى

1. استخدام طبقات متعددة

نصائح إضافية

كيفية إضافة صور وتأثيرات وفيديوهات لقصص ويب باستخدام AMP

كيفية إضافة صور إلى قصص ويب

1. إضافة صورة بسيطة

2. إضافة تأثيرات على الصور

خطوات إنشاء مشاركة أو صفحة ثابتة على بلوجر

4. اختبار القصة

5. نشر القصة

6. تحسين محركات البحث

7. التفاعل مع الجمهور

فوائد استخدام قصص الويب

الخاتمة

عن المؤلف

4 تعليقات

الانضمام إلى المحادثة

الانضمام إلى المحادثة