مميزات السلايدر شو
- سلايدر خفيف وأنيق ومتناسق
- متوافق مع جميع الأجهزة اللوحية والشاشات
- صمم بأحدث اللغات البرمجية Html5,Css3,Jquery
- يعرض أسم الكاتب على كل صورة من المقال
شرح تركيب السلايدر شو
- أولاٌ: يجب عليك البحث عن وسم
<"main-wrapper"> ثم تضع الأكواد البرمجية فوقه
<div class='slider-wrapper'>
<div class='section' id='slid-posts'><div class='widget HTML' data-version='1' id='HTML131'>
<b:section class='section' id='slid-posts' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML18' locked='false' title='' type='HTML' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
- ثانياٌ: ابحث عن الوسم
</head> وضع الأكواد التالية فوق الوسم
<style>
/* slider-wrraper by masrawy-web.net */
.slider-wrapper {
margin-top: -12px;
text-align: center;
font-size: 20px;
margin-bottom: 9px; padding-left: 2.5%;
padding-right: 1%;
}.owl-controls{ position:absolute; right:25px; top:11px}
.owl-nav >div {
float: right;display: inline-block;width: 32px;height: 30px;text-align: center;border-radius: 6px;color: #3D4A60;margin-right: 5px;line-height: 29px;cursor: url("https://lh3.googleusercontent.com/-jqMxzaB_y8I/VgatsQY6L4I/AAAAAAAAD9Y/PD8tTUKjBLw/s33-Ic42/handcu10.png"), auto;background: #FFF;font-weight: bold;font-size: 26px;}
.owl-nav >div:hover {
color: #ffffff;
background: #f39c12;
transition: 0.3s;
}
.owl-nav .owl-next:before{ content:"\f104"; font-family:fontawesome}
.owl-nav .owl-prev:before{ content:"\f105"; font-family:fontawesome}
.mag-content{
position: absolute;
bottom: 0;
left: 0;
z-index: 99999;
padding:26px 41px 44px 40px;
display: block;
background: rgb(1, 87, 155) url(http://www.mediafire.com/convkey/7415/586iels8dm5p97izg.jpg);
width: 100%;
height: 85px;
overflow: hidden;
transition: 0.2s;
vertical-align: middle;
text-align: center;
border-radius: 90px 90px 8px 8px;}
ul#recn-b li{ height:215px; position:relative; overflow:hidden}
.recent-author:before{ content:"\f007"; font-family:fontawesome; margin-left:5px; display:inline-block}
.recent-meta >span{font-size: 12px;
color: #FFF;
border-radius: 8px;
padding: 16px 17px;
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
margin: 42px;}
h3.mag-title a{color: #fff;
font-weight: 100;
font-size: 13px;
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
margin: 14px;
font-family: droid arabic kufi;
padding: 0px;}
.mag-thumb a{ display:block; width:100%; height:215px; overflow:hidden}
</style>
<style>
.feed-links {
display: none;
}
#slid-posts li:hover .mag-content {
background-image: -webkit-linear-gradient(transparent,rgb(61, 74, 96));
background-image: -moz-linear-gradient(transparent,rgb(247, 20, 20));
background-image: linear-gradient(transparent,rgb(61, 74, 96));
}
.owl-item:hover .mag-thumb:before {
animation: wobble 0.8s 50;
}
.mag-thumb:before {
content: "\f144";
font-family: fontawesome;
position: absolute;
transition: .2s;
z-index: 1;
background: #fff;
color: #3D4A60;
transform: scale(1);
top: 10px;
right: 10px;
width: 33px;
text-align: center;
line-height: 33px;
height: 33px;
font-size: 20px;
border-radius: 50%;
}
.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}
.owl-carousel{display:none;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.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;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{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{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:left}.no-js .owl-carousel{display:block}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-item img{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;-webkit-transition:scale 100ms ease;-moz-transition:scale 100ms ease;-ms-transition:scale 100ms ease;-o-transition:scale 100ms ease;transition:scale 100ms ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3,1.3);-moz-transition:scale(1.3,1.3);-ms-transition:scale(1.3,1.3);-o-transition:scale(1.3,1.3);transition:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-video-frame{position:relative;z-index:1}
</style>
شرح تركيب الإسكربت
يجب عليك تحميل الإسكربت البرمجي الخاص بالسلايدر شو المسئول عن الحركات أو التأثيرات وأيضا يوجد مع الملف المرفق شرح وضع الاسكربت كاملا.
ستجد فى الملف شرح جميع التعديلات وإلى هنا نكون وصلنا الى نهاية التدوينة إذا اعجبتك لاتنسى دعمنا بالتعليق لأنه يحفزنا ويجعلنا نقدم لكم المزيد من الشروحات الحصرية وأرجو إذا واجهتك مشكلة معينة فى التطوير ضعها فى التعليقات وإن شاء الله سيتم الرد عليك فى اقرب وقت ممكن بالجواب الصحيح .
لم أجد الوسم <"main-wrapper">
ردحذف