شرح تركيب الاضافة
اولا ابحث على الوسم </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>
<!-- 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/> ستجد اثنان منه او ثلاثة ضعه في الثانية
<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>
تعليقات: 0
إرسال تعليق