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

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي

اليوم اقدم لكم شكل جديد وبسيط لمواضيع ذات صلة على شكل سلايد شو يعرض ثلاث مواضيع وتلقائي

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

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

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

<b:if cond='data:view.isPost'>
<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[*/
/*=====================================
= title
=====================================*/
.widget-title{margin:0 0 15px;font-size:16px;line-height:20px;position:relative;margin-bottom:23px}
.widget-title:before{top:inherit;bottom:0;height:3px;margin-top:0;background-color:#1e55a3;content:'';display:inline-block;position:absolute;left:0;width:100%}
.widget-title span{padding:0 15px;position:relative;color:#fff;font-weight:400;line-height:28.8px;font-size:18px;text-transform:capitalize;background-color:#1e55a3;letter-spacing:-0.49px;display:inline-block;-webkit-transition:.35s cubic-bezier(.39,.58,.57,1) 0s;-moz-transition:.35s cubic-bezier(.39,.58,.57,1) 0s;-o-transition:.35s cubic-bezier(.39,.58,.57,1) 0s;transition:.35s cubic-bezier(.39,.58,.57,1) 0s;z-index:1}
.widget-title span:before{border-bottom-color:#1e55a3;background:#fff;content:'';display:inline-block;position:absolute;top:0;width:0;height:0;border-bottom:30px solid #1e55a3;border-right:20px solid transparent;z-index:1;right:-20px;background-color:transparent!important}
.widget-title span:after{content:'';display:inline-block;position:absolute;top:0;width:0;height:0;border-bottom:30px solid #000;border-right:20px solid transparent;z-index:1;right:-20px;background-color:transparent!important;border-bottom-color:rgba(255,255,255,.43);z-index:2;-webkir-box-shadow:-2px 2px 2px rgba(0,0,0,.1);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.1);box-shadow:-2px 2px 2px rgba(0,0,0,.1)}
/*=====================================
= slider
=====================================*/
.related-items .post{width:31.3333%;height:253px;float:right;margin:5px 3px;overflow:hidden}
.related-items{overflow:hidden;padding:5px}
.related-items .post .post-thumbnail{margin-bottom:10px;line-height:0;position:relative;height:188px}
.related-items .post .post-thumbnail .postCategory{position:absolute;top:0;right:0;z-index:1;line-height:0;font-size:0}
.related-items .post .post-thumbnail .postCategory a{padding:4px 9px;background:#1e55a3;color:#fff;margin-bottom:3px;font-weight:400;font-size:11px;text-transform:uppercase;display:inline-block;line-height:1.7;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.related-items .post .post-thumbnail img{width:100%;height:100%}
.related-items .post .title{font-size:15px;line-height:1.4;text-align:inherit;text-transform:none;color:#020202;letter-spacing:-0.3px;font-weight:600}
.related-items .post .title span{font-weight:600}
.related-items .owl-item .post{width:auto;height:auto;float:none}
.related-items .owl-nav div{opacity:0;transition:all .3s ease-in-out;top:33%;padding:0;background:#1e55a3;width:35px;height:35px;position:absolute;text-align:center;color:#ffffff}
.related-items .owl-nav .owl-next{right:5px;-webkit-border-radius:2px 0 0 2px;-moz-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px}
.related-items .owl-nav .owl-prev{left:4px;-webkit-border-radius:0 2px 2px 0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0}
.related-items .owl-nav .owl-next:before,.related-items .owl-nav .owl-prev:before{font-family:FontAwesome;display:block;line-height:35px;font-size:30px}
.related-items .owl-nav .owl-next:before{content:"\f105"}
.related-items .owl-nav .owl-prev:before{content:"\f104"}
.related-items:hover .owl-nav div{opacity:1;transition:all .3s ease-in-out}
/*]]>*/
</style>
</b:if>