الثلاثاء، 6 يونيو، 2017

تركيب سلايدر شو بشكل إحترافى ومتجاوب + شرح التعديل | الإصدار الأول


أهلاٌ وسهلاٌ بكم اعضاء موقع مصراوى ويب المتخصص فى التطوير اليوم فى تدوينة جديدة وهى عن كيفية تركيب سلايدر شو إحترافى بتنسيق مميز جداٌ وهو يعتبر من أهم الإضافات الإحترافية التى يجب ان توجد فى مدونتك لأنها تعطيها شكل انسيابى ومميز كما انها تلفت انتباه الزائر من حيث الجمال والتصميم واليوم السلايدر شو التى اقدمه لكم بتصميم احترافى مصمم على طرفى الموقع بلغتى Html5,Css3,Jquery وهو سلايدر رئسى متجاوب مع جميع الهواتف الذكية ليتناسب مع شكل هواتف الأندرويد والios

مميزات السلايدر شو

  1. سلايدر خفيف وأنيق ومتناسق
  2. متوافق مع جميع الأجهزة اللوحية والشاشات
  3. صمم بأحدث اللغات البرمجية Html5,Css3,Jquery
  4. يعرض أسم الكاتب على كل صورة من المقال

شرح تركيب السلايدر شو

أولاٌ: يجب عليك البحث عن وسم <"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 != &quot;&quot;'>
    <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 &gt;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(&quot;https://lh3.googleusercontent.com/-jqMxzaB_y8I/VgatsQY6L4I/AAAAAAAAD9Y/PD8tTUKjBLw/s33-Ic42/handcu10.png&quot;), auto;background: #FFF;font-weight: bold;font-size: 26px;}
.owl-nav &gt;div:hover {
    color: #ffffff;
    background: #f39c12;
    transition: 0.3s;
}
.owl-nav .owl-next:before{ content:&quot;\f104&quot;;  font-family:fontawesome}
.owl-nav .owl-prev:before{ content:&quot;\f105&quot;;  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:&quot;\f007&quot;;  font-family:fontawesome;  margin-left:5px;  display:inline-block}
.recent-meta &gt;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: &quot;\f144&quot;;
    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:&quot;.&quot;;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>

شرح تركيب الإسكربت 

يجب عليك تحميل الإسكربت البرمجي الخاص بالسلايدر شو المسئول عن الحركات أو التأثيرات وأيضا يوجد مع الملف المرفق شرح وضع الاسكربت كاملا.
تحميل الملف اضغط للتحميل

ستجد فى الملف شرح جميع التعديلات وإلى هنا نكون وصلنا الى نهاية التدوينة إذا اعجبتك لاتنسى دعمنا بالتعليق لأنه يحفزنا ويجعلنا نقدم لكم المزيد من الشروحات الحصرية وأرجو إذا واجهتك مشكلة معينة فى التطوير ضعها فى التعليقات وإن شاء الله سيتم الرد عليك فى اقرب وقت ممكن بالجواب الصحيح .


4 تعليقات على " تركيب سلايدر شو بشكل إحترافى ومتجاوب + شرح التعديل | الإصدار الأول "

ممكن قالب مدونتك الحالى

من عينى هنزلهومل كامل إن شاء الله

وممكن لوسمحت تنزلو باضافة التحميل والمعاينة الى انتا بتستخدمهم وتنزلو بلخلفية وبترقيم ذى ما هوة عندك بلظبط ؟؟