اضافة مواضيع ذات صلة لمدونات بلوجر على شكل سلايد شو احترافي 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>