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

Admin Amer

ديسمبر 14, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

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

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

• اولا ابحث على  وضع الكود التالي فوقه مباشرة

<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>

اقرا ايضا :تركيب صندوق اشتراك في القناة منبثق كتبها: المدون التقني - الخبير عامر بشير

• ثانيا ابحث على  وضع الكود التالي فوقه مباشرة

تحميل الاكواد

• الان في الخطوة الاخيرة ابحث على  ستجد اثنان منه او ثلاثة انتا ضعه في الثانية

<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>


الان احفظ القالب ومبروك عليك الاضافة


لتحكم في الاضافة

اقرا ايضا :إضافة الزمن الذي مضى عن التدوينة في مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

data-no="9" data-show="3">

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

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

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2018/12/blog-post_14.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2018/12/blog-post_14.html">اضافة مواضيع ذات صلة لمدونات بلوجر على شكل سلايد شو متعدد الاشكال كتبها: المدون التقني - الخبير عامر بشير</a>