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

Admin Amer

ديسمبر 12, 2018

0 تعليقات

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

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

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

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

شرح التركيب

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



<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>/*<![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></b:if>
2. البحث على هذا الكود في القالب  وضع الكود التالي فوق مباشرة



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

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

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

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

Written by you: Technical blogger AMER BACHIR

URL Of Post:

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

HTML Code Of Post:

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