جعل المشاركات الشائعة على شكل سلايدر

عبدو تكنولوجي - Abdou Technologie

18 أبريل 2019

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي

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

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

شرح التركيب

اولا احذف جميع اكواد 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>

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

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

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

هورث ويب - horse web 18 أبريل 2019 في 4:20 م

أزال أحد مشرفي المدونة هذا التعليق.
- عبدو تكنولوجي - Abdou Technologie 18 أبريل 2019 في 9:47 م
  
  الاضافة تعمل فقط انتا قم بتغيير ويدجت المشاركة الشائعة الى الافتراضية
  
  انا اسف سوف احذف الرابط لانه يحتوي على روابط

maher 18 أبريل 2019 في 4:30 م

شكرا لك

اضافة مميزة
- عبدو تكنولوجي - Abdou Technologie 18 أبريل 2019 في 9:49 م
  
  العفو

برمجة وتصميم 19 أبريل 2019 في 9:30 ص

السلام اخي لو سمحت هل تقوم بتركيب الاضافة وجزاك الله كل خير
- عبدو تكنولوجي - Abdou Technologie 19 أبريل 2019 في 1:17 م
  
  راسلني على صفحة اتصل بنا

برمجة وتصميم 19 أبريل 2019 في 1:28 م

تمت مراسلتك الرجاء الرد

برمجة وتصميم 19 أبريل 2019 في 5:00 م

ارسل لي هذا اكواد هذا السلايدر لأني حاولت احمله ولم استطيع
سلايد شو حسب التسمية لمدونات بلوجر | الشكل السادس

Unknown 19 أبريل 2019 في 7:27 م

https://marshmello-template-video.blogspot.com/2018/07/blog-post_62.html need this script plz share
- عبدو تكنولوجي - Abdou Technologie 19 أبريل 2019 في 11:31 م
  
  https://www.abdoutech.com/2019/01/script-show-list-manga-blogger.html

برمجة وتصميم 20 أبريل 2019 في 3:35 م

شكراً اخي عبدو على تركيب الاضافة

برمجة وتصميم 20 أبريل 2019 في 3:36 م

نريد مواضيع ذات صلة على شكل سلايدر
- عبدو تكنولوجي - Abdou Technologie 20 أبريل 2019 في 11:24 م
  
  https://www.abdoutech.com/2018/12/Related-Post-slider-Multistyle.html

برمجة وتصميم 26 أبريل 2019 في 3:40 م

السلام عليكم اخي عبدو هل تعطيني اخي اكواد قائمة ااصفحات التي في مدونتك