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

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

معاينة

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

<style>#PopularPosts1.PopularPosts{background:#fff;padding:0} #PopularPosts1.PopularPosts amp-img{width:300px;height:180px;} #PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0 10px 10px 0;padding:10px 0 0} #PopularPosts1.PopularPosts h2 div{padding:0 10px;display:inline;float:right;} #PopularPosts1.PopularPosts .slide .caption{position:absolute;bottom:0px;left:0;right:0;padding:6px 8px 10px;background:rgba(0,0,0,.6);color:#ddd;font-size:smaller;max-height:30%;line-height:1.1em;text-align: center;} </style><script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>

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

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

<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'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div><a expr:href='data:post.href'><data:post.title/></a></div><div><data:post.snippet/></div></b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <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>

شارك هذا