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

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

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

شرح التركيب

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

2. <b:if cond='data:view.isPost'>
3. <!-- owl Carousel -->
4. <link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/>
5. <style>
6. /*<![CDATA[*/
7. .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}
8. .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}
9. .title-box-img i {margin: 0 5px;}
10. .pics-content{padding:20px;background:#fff}
11. .picitem {height: 182px}.pics-content img{width:100%;height:100%}
12. /*]]>*/
13. </style>
14. </b:if>
15. 
    
16. 
    

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

<b:if cond='data:view.isPost'>

<b:tag name='srcipt' src='https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/OwlCarousel.js' type='text/javascript'/>

<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/,"//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>

</b:if>

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

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

• غرد
• شارك
• شارك
• شارك
• شارك