اولا ابحث على
</head>
وضع الكود التالي فوقه مباشرة
شاهد الملفات هذي شغاله او لا : اذا لا هنا ما راح تستفيد من الخدمه
js
ثانيا ابحث على
</body>
وضع الكود التالي فوقه مباشرة
شاهد الملفات هذي شغاله او لا : اذا لا هنا ما راح تستفيد من الخدمه
js
الان في الخطوة الاخيرة ابحث على
<data:post:body/>
ستجد اثنان منه او ثلاثة انتا ضعه في الثانية
احفظ القالب ومبروك عليك الاضافة
لتحكم في الاضافة
<div class='related-l' data-no="9" data-show="3">
- اللى برقم 9 هو عدد المواضيع
- اللى برقم 3 هو تغير الشكل
</head>
وضع الكود التالي فوقه مباشرة
<if cond="data:view.isPost">
<!-- owl Carousel -->
<link defer href="/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. 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.));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0. 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0. 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0. 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0. 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>
</if>
شاهد الملفات هذي شغاله او لا : اذا لا هنا ما راح تستفيد من الخدمه
js
ثانيا ابحث على
</body>
وضع الكود التالي فوقه مباشرة
<if cond="data:view.isPost">
<tag name="srcipt" type="text/javascript">
var text_month = [,"كانون الثاني","فبراير","مارس","أبريل","ماي","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];
</tag>
<tag name="srcipt" src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/owlcarousel.js" type="text/javascript"></tag>
<tag name="srcipt" src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/gadget/slider_v10.js" type="text/javascript"></tag>
</if>
شاهد الملفات هذي شغاله او لا : اذا لا هنا ما راح تستفيد من الخدمه
js
الان في الخطوة الاخيرة ابحث على
<data:post:body/>
ستجد اثنان منه او ثلاثة انتا ضعه في الثانية
<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">
<loop values="data:post.labels" var="label">
<if cond='data:label.isLast == "true"'>
<label.name></label.name>
</if>
</loop>
</div>
</div>
</if>
احفظ القالب ومبروك عليك الاضافة
لتحكم في الاضافة
<div class='related-l' data-no="9" data-show="3">
- اللى برقم 9 هو عدد المواضيع
- اللى برقم 3 هو تغير الشكل