السلام عليكم ومرحبا بكم في مدونة اسمعنى ان لاين
اقدم لكم اضافة رائعة و هيا عبارة عن جعل المشاركات الشائعة تظهر على شكل سلايدر
يمكنك معاينة الاضافة من هنا
شرح التركيب
اولا احذف جميع اكواد css الخاصة بشكل الاول للمشاركة الشائعة
- ثانيا إبحث في القالب على هذا الكود </head> وضع الكود التالي فوقه مباشرة
<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>
- الان إبحث في القالب على </body> وضع الكود التالي فوقه مباشرة
<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>
الان احفظ القالب ومبروك عليك الاضافةلا تنسى الاشتراك في المدونة لكي تتوصل بكل جديد