السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي
اليوم اقدم لكم شكل جديد وبسيط لمواضيع ذات صلة صالحة لقوالب التي تعمل ب ال AMP وبدون فريم و استضافة خارجية
شرح التركيب في الفيديو التالي
كود الذي يوضع فوق ال /head
<b:if cond='data:view.isPost'>
<script async='async' custom-element='amp-list' src='https://cdn.ampproject.org/v0/amp-list-0.1.js' />
<script async='async' custom-element='amp-bind' src='https://cdn.ampproject.org/v0/amp-bind-0.1.js' />
<script async='async' custom-template='amp-mustache' src='https://cdn.ampproject.org/v0/amp-mustache-0.2.js' />
<script async='async' custom-element='amp-timeago' src='https://cdn.ampproject.org/v0/amp-timeago-0.1.js' />
</b:if>
<style amp-custom='amp-custom'>
:root{--main-color:#e05a2f;--main-background:#f1f1f1;--background-post:#F6F6F6;--background-read-more:#ffffff;--background-read-more-hover:#f6f6f6;--background-footer:#cccccc;--post-color-link:#999999;--post-color-text:#6C6C6C;--post-color-details:#4e4d4d}
/*<![CDATA[*/
@-webkit-keyframes animateHeart{0%,100%,50%{-webkit-transform:scale(1)}5%{-webkit-transform:scale(1.2)}10%{-webkit-transform:scale(1.1)}15%{-webkit-transform:scale(1.3)}}@keyframes animateHeart{0%,100%,50%{-webkit-transform:scale(1);transform:scale(1)}5%{-webkit-transform:scale(1.2);transform:scale(1.2)}10%{-webkit-transform:scale(1.1);transform:scale(1.1)}15%{-webkit-transform:scale(1.3);transform:scale(1.3)}}.related-post #list{width:100%!important}.related-post li{margin:10px 9px;width:100%;background:var(--background-footer);padding:12px 6px 12px 17px;border-radius:50px;display:flex;align-items:center;max-height:114px;margin-right:0}.related-post li .thumb{width:100px;height:100px;border-radius:50%;border:2px solid #fff;margin-right:15px;overflow:hidden;cursor:pointer}.related-post li .thumb:hover{-webkit-animation:animateHeart 2.5s infinite;animation:animateHeart 2.5s infinite}.related-post li .thumb img{height:100%;width:100%}.related-post{padding:10px 5px 0 24px;margin:0 auto}.related-post li .details{margin-right:10px}.related-post li .details h1{line-height:1.3rem;font-size:18px}.related-post li .details h1 a{font-weight:700}.related-post li .details .date{display:block;font-size:15px;color:var(--post-color-details);margin-top:13px;cursor:pointer;display:block}.related-post li .details .date time{display:block;font-size:12px;color:var(--post-color-details);margin-top:7px;cursor:pointer}.related-post li .details .date .icon{float:right;width:9px;height:9px;margin-top:12px;margin-left:3px;fill:var(--post-color-details)}.related-post li .read-more{margin-right:auto}.related-post li .read-more a{background:var(--background-read-more);display:block;padding:10px 11px;border-radius:25px;font-weight:700;transition:all .5s ease}.related-post li .read-more a svg{display:none}.related-post li .read-more a:hover{background:var(--background-read-more-hover)}@media screen and (max-width:1140px){.related-post li .details h1{font-size:15px}.related-post li .thumb{width:70px;height:70px}.related-post li .details .date{font-size:12px}.related-post li .read-more a{padding:10px 11px;font-size:12px}.related-post li .read-more a span{display:none}.related-post li .read-more a svg{display:block;fill:var(--post-color-text);width:10px;height:10px}}@media screen and (max-width:540px){.related-post li{border-radius:6px;margin:5px auto}.related-post li .thumb{margin-right:0}.related-post li .details{display:block}.related-post li .read-more{display:none}.related-post li .details h1{font-size:12px}.related-post li .details .date time{font-size:10px}.related-post li .details .date svg{height:8px!important;margin-top:11px!important}}
/*]]>*/
</style>
الكود الذي يوضع مع اكواد ال Blog
<b:includable id='related' var='post'>
<svg layout='nodisplay'>
<defs>
<symbol id='icon-clock' viewBox='0 0 32 32'>
<path d='M20.586 23.414l-6.586-6.586v-8.828h4v7.172l5.414 5.414zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z' />
</symbol>
<symbol id='icon-plus' viewBox='0 0 32 32'>
<path d='M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z' />
</symbol>
</defs>
</svg>
<b:if cond='data:widgets.Blog.first.allBylineItems.labels and data:post.labels.any'>
<div class='related-post'>
<div class='widget-title'>
<h2>مواضيع ذات صلة</h2>
</div>
<amp-list expr:src='"/feeds/" + data:blog.blogId + "/posts/default/-/" + data:post.labels.first.name + "?alt=json&max-results=5"' height='450' id='list' items='feed.entry' layout='responsive' single-item='' width='500'>
<template type='amp-mustache'>
<li>
<a href='{{#link.4}}{{href}}{{/link.4}}'>
<div class='thumb'>
{{#media$thumbnail}}
<amp-img alt='{{#title}}{{$t}}{{/title}}' height='150' layout='responsive' src='{{url}}' width='150' />
{{/media$thumbnail}}
{{^media$thumbnail}}
<amp-img alt='{{#title}}{{$t}}{{/title}}' height='150' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NjVOcFCHKXKenO5kXTiHmoHKhkmr8CRQItvIcdRX1BitHHWNykEm6MQcgZeGqlDuZ0NAtYxgc_elqjjSGyTFaH3xac0m3oNVDsQ-urPVTINC5kSehecTBXHMMZghlRcLP3OSsBgbNiru/w150-h150-p-k-no-nu/noimg.png' width='150' />
{{/media$thumbnail}}
</div>
</a>
<div class='details'>
<h1 class='post-title'>
<a href='{{#link.4}}{{href}}{{/link.4}}' target='_blank' title='{{#title}}{{$t}}{{/title}}'>{{#title}}{{$t}}{{/title}}</a>
</h1>
<a class='date' href='{{#link.4}}{{href}}{{/link.4}}' title='bookmark'>
<svg class='icon icon-clock'>
<use xlink:href='#icon-clock' />
</svg>
<amp-timeago datetime='{{#published}}{{$t}}{{/published}}' height='30' layout='responsive' locale='ar' width='160'>{{#title}}{{$t}}{{/title}}
</amp-timeago>
</a>
</div>
<div class='read-more'>
<a href='{{#link.4}}{{href}}{{/link.4}}' title='{{#title}}{{$t}}{{/title}}'>
<span>قراءة المزيد</span>
<svg class='icon icon-plus'>
<use xlink:href='#icon-plus' />
</svg>
</a>
</div>
</li>
</template>
<div fallback=''>حدث خطأ</div>
<div placeholder='' />
</amp-list>
</div>
</b:if>
</b:includable>
تبحث على الكود التالي
<b:includable id='postBody' var='post'>
الكود الذي تضعه امامه
<b:include data='post' name='related'/>
الان احفظ القالب ومبروك عليك الاضافة
اذا اعجبتك الاضافة لا تنسى الاشتراك في المدونة من هنا
تعليقات