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

Admin Amer

أبريل 18, 2019

0 تعليقات

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

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

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير 

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

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

شرح التركيب 

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

<style type="text/css">/*<![CDATA[*/ .owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;/* position relative and z-index fix webkit rendering fonts issue */ position:relative;z-index:1} .owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden;/* fix firefox animation glitch */} .owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0} .owl-carousel .owl-stage-outer{position:relative;overflow:hidden;/* fix for flashing background */ -webkit-transform:translate3d(0px,0px,0px)} .owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} .owl-carousel .owl-item img{display:block;width:100%} .owl-carousel .owl-nav.disabled,.owl-carousel .owl-dots.disabled{display:none} .owl-carousel .owl-nav .owl-prev,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-dot{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel.owl-loaded{display:block} .owl-carousel.owl-loading{opacity:0;display:block} .owl-carousel.owl-hidden{opacity:0} .owl-carousel.owl-refresh .owl-item{visibility:hidden} .owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel.owl-grab{cursor:move;cursor:grab} .owl-carousel.owl-rtl{direction:rtl} .owl-carousel.owl-rtl .owl-item{float:right} /* No Js */ .no-js .owl-carousel{display:block} .owl-carousel .animated{animation-duration:1000ms;animation-fill-mode:both} .owl-carousel .owl-animated-in{z-index:0} .owl-carousel .owl-animated-out{z-index:1} .owl-carousel .fadeOut{animation-name:fadeOut} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} .owl-height{transition:height 500ms ease-in-out} .owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity 400ms ease} .owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d} .owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000} .owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url("owl.video.play.png") no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform 100ms ease} .owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)} .owl-carousel .owl-video-playing .owl-video-tn,.owl-carousel .owl-video-playing .owl-video-play-icon{display:none} .owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity 400ms ease} .owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /*start*/ .PopularPosts .widget-content {padding:0} .sl-PopularPosts li {position: relative;} .sl-PopularPosts li{position:relative;padding:0!important} .sl-PopularPosts .owl-dots{position:absolute;right:10px;width:34px;border-radius:100px;padding:20px 0;background-color:#fff;box-shadow:0 4px 9px 0 rgba(43,43,49,.1),0 7px 14px 0 rgba(43,43,49,.13);text-align:center;bottom:37%} .sl-PopularPosts .owl-dots .owl-dot{display:block;width:8px;height:8px;background-color:#efefef;box-shadow:inset 0 0 0 8px #efefef;margin:4px auto;border-radius:50%;-webkit-transition:-webkit-transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;-moz-transition:transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;-o-transition:transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;transition:transform 0.1s ease-in-out,background-color 0.2s ease 0.3s,box-shadow 0.25s ease-out;cursor:pointer} .sl-PopularPosts .owl-dots .active{background-color:#fff;box-shadow:inset 0 0 0 2px #2B0C93;-webkit-box-shadow:inset 0 0 0 2px #2B0C93;width:12px;height:12px} .sl-PopularPosts .owl-nav{text-align:center;opacity:0;transition:all .2s ease} .Popularthumb .owl-nav{bottom:-20px;top:inherit;left:50%;right:inherit;opacity:1;width:80px;height:32px;display:block;padding:0;margin-left:-40px} .Popularthumb .owl-nav .owl-prev,.Popularthumb .owl-nav .owl-next{display:inline-block;height:32px;line-height:32px;padding:0 15px} .Popularthumb{margin-bottom:20px} .sl-PopularPosts:hover .owl-nav{opacity:1} .sl-PopularPosts .owl-nav div{float:right;color:#a8b6c0;width:38px;height:34px;border-radius:50px;padding:20px 0;background-color:#fff;box-shadow:0 4px 9px 0 rgba(43,43,49,.1),0 7px 14px 0 rgba(43,43,49,.13);position:absolute;top:10px;text-align:center} .sl-PopularPosts .owl-nav div i{line-height:20px;position:absolute;margin-top:-25%;margin-right:-3px} .sl-PopularPosts .owl-nav .owl-prev{right:5px} .sl-PopularPosts .owl-nav .owl-next{left:5px} ul.tline-posts{border-left:3px solid #ececec;padding-left:8px} ul.tline-posts h3 a{font-size:13px;color:#444;font-weight:100} ul.tline-posts li{margin-bottom:15px} .tline-posts li:hover .tl-date:before{background:#f1c40f} .tline-posts a:hover{color:#f1c40f} h3.tl-title{padding-left:5px} .Popularthumb{width:100%;height:250px} .Popularthumb a{display:block;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center} .sl-content{position:absolute;bottom:0;z-index:9999;width:100%;padding:20px;text-align:center} h3.sl-title a{color:#eee;font-size:14px} h3.sl-title a{color:#fff!important} .gr-mag{z-index:99;left:0;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-webkit-gradient(linear,left top,left 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)} /*]]>*/ </style>

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

<script src='https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/OwlCarousel.js' type='text/javascript'></script><script type='text/javascript'>//<![CDATA[ $(document).ready(function(){$(".PopularPosts ul li").each(function(){var a=$(this),b=a.find(".item-title a").text(),c=a.find(".item-title a").attr("href"),d=a.find(".item-thumbnail img").attr("src"),e="<div class=\"Popularthumb\"><a href=\""+c+"\" style=\"background-image: url("+d.replace(/lh[0-9]+.googleusercontent.com/,"//1.bp.blogspot.com/").replace("/w70-h70-p-k-no-nu/","/w345-h250-p-k-no-nu/")+");\" target=\"_blank\"></a></div><div class=\"sl-content gr-mag\"><h3 class=\"sl-title\"><a href=\""+c+"\" target=\"_blank\">"+b+"</a></h3></div>";a.html(e)}),$(".PopularPosts ul").each(function(){$(this).addClass("sl-PopularPosts").owlCarousel({rtl:!0,loop:!0,margin:10,autoplay:!0,items:1,nav:!0,dots:!0,navText:["<i class='fa fa-angle-right'></i>","<i class='fa fa-angle-left'></i>"],responsive:{0:{items:1},360:{items:1},500:{items:1},750:{items:1},1e3:{items:1},1200:{items:1}}})})}); //]]></script>


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

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

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

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2019/04/blog-post.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2019/04/blog-post.html">جعل المشاركات الشائعة على شكل سلايدر كتبها: المدون التقني - الخبير عامر بشير</a>