نشر هذا السلايدر شو لأول مرة في مدونة عبدو تكنولوجي ولكن بعد مدة تفاجئت أن الموقع اتلسالف الذكر لا يعمل أو الدومين الخاص به لم يعد موجودا ولأني قد كنت وضعته سابقا على مجلة وسيم للأطفال وبطلب من الكثير من متابعي مدونة أفكار ويب حاولت إعادة السلايدر شو من جديد على مدونة أفكار ويب.
طريقة تركيب القالب:
نبحث عن وسم /head في القالب و ضع كود التالي فوقه مباشرة .
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/*<![CDATA[*/
/* slider Posts */
.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%}
.slider-featured{background-color:#c2c9d0;clear:both;width:100%;height:270px;position:relative}
.slider-featured:after{content:" ";display:block;clear:both}
.owl-loaded .featured-posts{display:block!important}
.slider-featured .featured-posts{list-style:none;position:relative;height:270px;display:none}
.slider-featured-grid .featured-posts{position:relative;height:200px;width:25%;display:block;float:left}
.slider-featured-grid .featured-posts .featured-content{bottom:10px;top:inherit;text-align:left;left:14px}
.slider-featured-grid .featured-posts:first-child{height:400px;width:50%}
.slider-featured-grid .featured-posts .featured-title{font-size:15px;margin-top:6px}
.featured-content .post-time,.featured-content .post-time i{color:rgba(255,255,255,0.4)}
.featured-post{background-repeat:no-repeat;background-size:cover;background-position:25% 50%;position:absolute;top:0;left:0;height:100%;bottom:0;right:0}
.featured-posts:hover .featured-post:after{background-color:rgba(36,36,40,0)}
.featured-post:after{content:' ';position:absolute;background-color:rgba(36,36,40,0.5);transition:all .2s ease;top:0;left:0;bottom:0;right:0;z-index:2}
.featured-posts .featured-content{position:absolute;top:90px;right:0;left:0;text-align:center;padding:8px 6px;color:#a5a4a4;background-color:rgba(0,0,0,0);z-index:4}
.featured-ft{display:block;margin:8px 0;position:absolute;z-index:2;top:10px;right:20px}
.featured-posts .featured-title{font-size:24px;line-height:1.4em;text-transform:uppercase;display:block;font-weight:300;text-shadow:1px 2px 2px rgba(0,0,0,.2);color:#fff}
.featured-content span,.featured-content i{font-size:12px;text-shadow:1px 2px 2px rgba(0,0,0,.2);color:#fff}
span.featured-format-tags{padding:4px;background:-webkit-linear-gradient(-30deg,#00004d 0%,#5333ed 49%,#2cd4d9 100%);text-align:center;background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93',endColorstr='#f84272',GradientType=1 )}
.featured-content .post-time{float:none}
.slider-featured .owl-stage .post-time{opacity:0;-webkit-transform:translateY(22px);transform:translateY(22px)}
.slider-featured .owl-stage .active .post-time{transform:translate3d(0px,0px,0px);opacity:1;transition-property:-webkit-transform,opacity;transition-duration:800ms;transition-timing-function:cubic-bezier(0.39,0.575,0.565,1)}
.slider-featured .owl-stage .featured-title{opacity:0;-webkit-transform:translateY(22px);transform:translateY(22px)}
.slider-featured .owl-stage .active .featured-title{transform:translate3d(0px,0px,0px);opacity:1;transition-property:-webkit-transform,opacity;transition-duration:400ms;transition-timing-function:cubic-bezier(0.39,0.575,0.565,1)}
.slider-featured .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:10px}
.slider-featured .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}
.slider-featured .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}
.slider-featured .owl-nav{position:absolute;top:10px;color:#a8b6c0;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;right:10px;opacity:0;transition:all .2s ease}
.slider-images .owl-nav{bottom:-20px;top:inherit;left:50%;right:inherit;opacity:1;width:80px;height:32px;display:block;padding:0;margin-left:-40px}
.slider-images .owl-nav .owl-prev,.slider-images .owl-nav .owl-next{display:inline-block;height:32px;line-height:32px;padding:0 15px}
.slider-images{margin-bottom:20px}
.slider-featured:hover .owl-nav{opacity:1}
.slider-featured .owl-prev:hover,.slider-featured .owl-next:hover{color:#2B0C93;cursor:pointer}
/*]]>*/
</style>
</b:if>
ابحث في القالب على </body>وضع الكود التالي فوقه مباشرة
<b:if cond='data:view.isHomepage'>
<script defer='defer' src='https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/OwlCarousel.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var month_format = [, "يناير", "فبراير", "مايو", "أبريل", "مارس", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
var noimg ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMAAtbZsDGOmddNshQ0mNgvM1KXKWSwAJ3bG9892U8et8dEEcTVkPlI3kbLcX6XzFJTBhT1hqpf2YkowTOY7GiIEjKjyMKHVIPdWzagWCehIrrOJ77mCcfeybEjcj_C10PVDqpo1csC4A/s1600-r/nth.png";
var numitem = randomnum(1,3);// (1,3) رقم عشوائي من واحد الى ثلاث
var numitemmob = 2;
function randomnum(r,a){for(var n=1;n<=5;n++){var o=a-r+1;return Math.floor(Math.random()*o)+r}}
!function(){var e=document.createElement("script")
e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/gadget/slider-11.js"
var t=document.getElementsByTagName("script")[0]
t.parentNode.insertBefore(e,t)}();
//]]>
</script>
</b:if>
الان لاضهار السلايد شو ضع الكود التالي في المكان الذي تريده
غير ماكتب باللون الاحمر بعدد المواضيع التي تريد ضهورها على سلايدر
غير ماكتب باللون الاحمر بعدد المواضيع التي تريد ضهورها على سلايدر
<b:tag class='featuredabdou' cond='data:view.isHomepage' data-label='تسمية' data-num='15' name='div'/>
<br/>
الان احفظ القالب مبروك عليك الاضافة
