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

السلام عليكم مرحبا بكم في مدونة عبدو تكنولوجي اليوم اقدم لكم شكل جديد من مواضيع ذات صلة حيث يمكنك تحكم بشكلها واختيار شكل الذي تريده 

معاينة الاضافة من  

شرح تركيب الاضافة

• اولا ابحث على </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.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> </if>

• ثانيا ابحث على </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>

• الان في الخطوة الاخيرة ابحث على <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">

1. الذي ب اللون الاحمر هوا عدد المواضيع التي تريد ضهورها
2. الذي ب الازرق هوا لتغيير شكل ضهور السلايدر

الى هنا نصل الى نهاية الشرح لا تنسى الاشتراك في المدونة لكي تتوصل بكل جديد