تركيب سلايدر شو بشكل إحترافى ومتجاوب + شرح التعديل | الإصدار الأول
اليوم فى تدوينة جديدة وهى عن كيفية تركيب سلايدر شو إحترافى بتنسيق مميز
جداٌ وهو يعتبر من أهم الإضافات الإحترافية التى يجب ان توجد فى مدونتك
لأنها تعطيها شكل انسيابى ومميز كما انها تلفت انتباه الزائر من حيث الجمال
والتصميم واليوم السلايدر شو التى اقدمه لكم بتصميم احترافى مصمم على طرفى
الموقع بلغتى Html5,Css3,Jquery وهو سلايدر رئسى متجاوب مع جميع الهواتف
الذكية ليتناسب مع شكل هواتف الأندرويد والios
تحميل الملف اضغط للتحميل
المصدر مصروي ويب
مميزات السلايدر شو
- سلايدر خفيف وأنيق ومتناسق
- متوافق مع جميع الأجهزة اللوحية والشاشات
- صمم بأحدث اللغات البرمجية 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6eQejmWNVErf_JUzaDUWMuCA2BRkW7zJX0MRZKuNMHdyQI1XzS5T0myhzasSUKO3EvO2ByUECiHByGjDozvF1mMSzvFDPRKBuwJEks45WtX9UJ7CTg76IQ04wnYaLz3V8Jw7cAN7HYE_/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>
شرح تركيب الإسكربت
يجب عليك تحميل الإسكربت البرمجي الخاص بالسلايدر شو المسئول عن الحركات أو
التأثيرات وأيضا يوجد مع الملف المرفق شرح وضع الاسكربت كاملا.
ستجد فى الملف شرح جميع التعديلات وإلى هنا نكون وصلنا الى نهاية التدوينة
إذا اعجبتك لاتنسى دعمنا بالتعليق لأنه يحفزنا ويجعلنا نقدم لكم المزيد من
الشروحات الحصرية وأرجو إذا واجهتك مشكلة معينة فى التطوير ضعها فى
التعليقات وإن شاء الله سيتم الرد عليك فى اقرب وقت ممكن بالجواب الصحيح .
تقييمات المشاركة : تركيب سلايدر شو بشكل إحترافى ومتجاوب + شرح التعديل | الإصدار الأول
9 على 10 مرتكز على 10 تقييمات. 9 تقييمات القراء.
.png "English"){kind=small}
أضف تعليق ،،