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

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

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

شرح التركيب

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



<if cond="data:view.isPost"> <!-- owl Carousel --> <link defer href="/ajax/libs/owlcarousel2/2-2-1/assets/owl.carousel.css" rel="stylesheet"> <style> /*<![CDATA[*/ .img-box{clear:both;box-shadow:0 0 8px 0 rgba(0,0,0,.06),0 1px 0 0 rgba(0,0,0,.02);margin: 62px auto} .title-box-img{display:block;position:relative;margin-bottom:0;color:#0076fe;font-weight:500;text-align:center;background:#fdfdfd;line-height:40px;padding-bottom:2px;border-bottom:1px solid #eee} .title-box-img i {margin: 0 5px;} .pics-content{padding:20px;background:#fff} .picitem {height: 182px}.pics-content img{width:100%;height:100%} /*]]>*/ </style> </if>
2. البحث على هذا الكود في القالب </body> وضع الكود التالي فوق مباشرة



<if cond="data:view.isPost"> <tag name="srcipt" src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/owlcarousel.js" type="text/javascript"></tag> <script type="text/javascript"> //<![CDATA[ var title_img ='صور الموضوع'; var postclass='post-body'; $("."+postclass).each(function(){for(var i="<div class='title-box-img'> <i class='fa fa-camera'/>"+title_img+"</div> ",s="<div class='img-box'> "+i+"<div class='pics-content'> ",e="",a=$(this).find("img"),c=a.length,l=0;c>l;l++){var t=a[l].src.replace("/s72-c/","/w300/").replace(/lh[0-9]+.googleusercontent.com/,"https://1.bp.blogspot.com/").replace("/s640/","/w300/") e+='<div class="picitem"> <img src="'+t+'"></div> '}s+="<div class='pics-ul ' id='img-slider'> "+e+"</div> </div> </div> ","0"==c||$(this).append(s),$(".pics-ul").owlCarousel({loop:!0,margin:15,rtl:!0,autoplay:!0,navText:["",""],navspeed:2e3,responsive:{0:{items:2},600:{items:3},1e3:{items:3}}})}) //]]> </script> </if>

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

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