اضافة مواضيع ذات صلة لمدونات بلوجر على شكل سلايد شو احترافي 2019

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

لمعاينة السلايد شو من

هنا

شرح تركيب الاضافة
اولا ابحث على الوسم </head> وضع الكود التالي فوقه

<b:if cond='data:view.isPost'>
<!-- owl Carousel -->
<link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/>
<style type="text/css">
/*<![CDATA[*/
/* Related Posts */
#related-posts{background:#ffffff;margin-bottom:30px;border:1px solid #e5e5e5;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.06);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.06);margin-bottom:30px;padding:20px}
#related-posts li{overflow:hidden;position:relative;padding:0;list-style:none}
.related-img{height:240px}
.related-img a{display:block;width:100%;height:100%}
.related-content{position:absolute;bottom:0;padding:20px;width:100%;text-align:right}
.related-title a{color:#eee;font-family:inherit;font-weight:700;font-size:15px}
.related-label{color:#fff;font-size:13px;background:#0076fe;padding:2px 10px;display:inline-block;margin-bottom:10px;overflow:hidden}#related-posts .recent-meta{opacity:0;visibility:hidden;margin-bottom:-24px}
#related-posts li:hover .recent-meta{opacity:1;visibility:visible;margin-bottom:0}
#related-posts li:hover .related-label{color:#555;background:#fff}
#related-posts h5{float: right;display:inline-block;background:#ffffff;padding:0 8px;font-family:inherit;text-transform:uppercase;font-weight:700;font-size:14px;border-right:3px solid #0076fe;color:#555555;position:relative;z-index:999}
#related-posts .widget-title{border-bottom:1px solid #eeeeee;position:relative;margin-bottom:15px;padding-bottom:10px}
#related-posts .widget-title:after{content:"";height:2px;background:#eeeeee;display:inline-block;width:100%;position:absolute;left:0;top:9px}
#related-posts .owl-nav{float:left;background:#ffffff;padding-right:3px;position:relative;z-index:999}
#related-posts .owl-nav div{float:right;width:25px;text-align:center;background:#eeeeee;height:25px;margin-right:5px;line-height:25px;margin-top:-4px;color:#555;font-size:15px;cursor:pointer}
#related-posts .owl-nav div:hover{color:#fff;background:#0076fe}
.mag-share{position:absolute;top:0;height:0;right:0;z-index:99;width:100%;padding:10px}
.mag-share .share-button{line-height:27px!important;font-size:13px!important;border:1px solid #fff;float:right;color:#fff!important;position:static!important;width:27px;height:27px;text-align:center;background:rgba(0,0,0,0.11);padding:0!important}
.mag-share ul{float:left;margin-top:-15px;opacity:0;visibility:hidden}
.mag-share ul a{float:right;width:25px;height:25px;padding:0!important;font-size:13px;text-align:center;line-height:25px!important;margin-right:5px;color:#fff!important}
.mag-share.actived ul{opacity:1;margin:0;visibility:visible}
.mag-share a:hover,.mag-share.actived .share-button{color:#555!important;background:#fff}
.facebook-share{margin-right:0!important;background:#3b5998}
.twitter-share{background:#55acee}
.google-plus-share{background:#DD4B39}
.linkedin-share{background:#0976b4}
.pinterest-share{background:#C92228}
#related-posts a,#related-posts .recent-meta,.owl-nav div{transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s;-moz-transition:all .3s}
.grident-mag{z-index:99;right:0;pointer-events:none;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-webkit-gradient(linear,right top,right bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.8)));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000',GradientType=0)}
.grident-mag span{color:#ccc!important}
.recent-meta{margin-top:10px}
.recent-meta span{font-family:inherit;text-transform:capitalize;color:#6d7683;font-size:12px}
.recent-date{margin-left:10px}
.recent-meta span:before,.related-meta span:before{font-family:fontawesome;margin-left:5px;position:relative;top:-1px}
.recent-author:before{content:"\f007"}
.recent-date:before{content:"\f073"}
/*]]>*/
</style>
</b:if>

ثانيا ابحث على الوسم </body> وضع الكود التالي فوقه

من هنا

الان في الخطوة الاخيرة ابحث على وسم <data:post:body/> ستجد اثنان منه او ثلاثة ضعه في الثانية

    

<b:if cond='data:view.isPost'>
<div id='related-posts'>
<div class='widget-title'>
<h5>
<trans id='pRelalted'>مواضيع ذات صلة</trans></h5>
</div>
<div class='related-l' data-no="9" data-show="3">
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<data:label.name/>
</b:if>
</b:loop>
</div>
</div>
</b:if>