تغيير شكل المشاركات الشائعة الى شكل سلايد متحرك

السلام عليكم مرحبا بكم في مدونة عبدو تكنولوجي اليوم اقدم لكم شكل جديد من المشاركات الشائعة و هوا على شكل سلايدر يعمل ب ال amp الان نتجه لشرح بسرعة

معاينة

إبحث على </head> او اكتب /head
وضع هذا الكود فوقه

الان ابحث على المشاركة الشائعة التي تستعملها

وحددها على هذا الشكل

<b:widget id='PopularPosts1' locked='false' title='الشائعة' type='PopularPosts' version='1'>
        <b:widget-settings>
          <b:widget-setting name='numItemsToShow'>4</b:widget-setting>
          <b:widget-setting name='showThumbnails'>true</b:widget-setting>
          <b:widget-setting name='showSnippets'>false</b:widget-setting>
          <b:widget-setting name='timeRange'>LAST_MONTH</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <b:if cond='data:title != ""'><h2>
<div>
<data:title/></div>
</h2>
</b:if>
  <div class='widget-content popular-posts'>
<amp-carousel autoplay='autoplay' delay='2000' height='180' layout='fixed-height' type='slides'>
  <b:loop values='data:posts' var='post'>
  <b:if cond='!data:showThumbnails'>
  <b:if cond='!data:showSnippets'>
  
  <a expr:href='data:post.href'><data:post.title/></a>
  <b:else/>
  
  <div>
<a expr:href='data:post.href'><data:post.title/></a></div>
<div>
<data:post.snippet/></div>
</b:if>
  <b:else/>
  
  <div class='slide'>
  <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
    <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
    <b:with value='data:post.featuredImage.isResizable                            ? resizeImage(data:post.featuredImage, 300)    : data:post.thumbnail' var='image'>
    <amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='300'/>
    </b:with>
      </a>
    </b:if>
      <div class='caption'>
<data:post.title/></div>
</div>
</b:if>
  </b:loop>
</amp-carousel>
  </div>
</b:includable>
      </b:widget>