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

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

اتبع الخطوات الاتيه.

اولا تعريف الاكواد:)

1. مصمم الاضافه حسين ورضوان.
2. السلايد متوافق مع جميع الشاشات.
3. يتناسق مع جميع القوالب .

تركيب السلايد يتكون من:)

1. كود الاستايل هو css.
2. كود جافا سكربت java.
3. كود الصندوق هو html.

تركيب كود css. ضعه فوق     ]]></b:skin>

/* Slider Carsooul
------------------------------- */
.widget-loader {
text-align: center;
font-size: 18px;
height: 350px;
background: #f88e21;
color: #ffffff;
position: absolute;
right: 0;
line-height: 350px;
left: 0;
z-index: 9;
top: 0;
}
.dot {
width: 30px;
height: 30px;
border: 7px solid #fff;
border-radius: 50%;
margin: 0 5px;
display: inline-block;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: fx 1000ms ease infinite 0;
animation: fx 1000ms ease infinite 0ms;
}
.dot:nth-child(2){-webkit-animation:fx 1000ms ease infinite 300ms; animation:fx 1000ms ease infinite 300ms}
.dot:nth-child(3){-webkit-animation:fx 1000ms ease infinite 600ms; animation:fx 1000ms ease infinite 600ms}
@-webkit-keyframes fx{50%{-webkit-transform:scale(1); transform:scale(1); opacity:1; filter:alpha(opacity=100)}
100%{opacity:0; filter:alpha(opacity=0)}
}
@keyframes fx{50%{-webkit-transform:scale(1); transform:scale(1); opacity:1; filter:alpha(opacity=100)}
100%{opacity:0; filter:alpha(opacity=0)}
}
#main-sliderone .mag-content,div#related-posts .mag-content{
position: absolute;
bottom: 0;
width: 100%;
z-index: 3;
padding: 20px;
display: block;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgb(248, 142, 33));
overflow: hidden;
vertical-align: middle;
padding-bottom: 30px;
left: 0;
margin-right: -2px;
}
#main-sliderone .mag-content h3.mag-title a,div#related-posts  .mag-content h3.mag-title a {
color: #fff;
font-size: 21px;
font-weight: 100;
margin-bottom: 6px;
display: block;
margin-right: 18px
}
.tag-slide {
position: absolute;
left: 9%;
top: 7%;
z-index: 1;
}
.tag-slide a {
background: white;
padding: 7px;
display: block;
border-radius: 4px;
padding-left: 21px;
color: #f88e21;
}
.slider-meta .author {
float: right;
margin-left: 10px;
color: #fff;
}
.slider-meta .author i {
display: inline-block;
margin-left: 6px
}
.slider-meta {
display: block;
font-size: 13px;
overflow: hidden;
margin-right: 20px;
}
.slider-meta .time i {
display: inline-block;
margin-left: 6px
}
.slider-meta .time {
margin-right: 5px;
color: #fff;
margin-bottom: 6px;
float: right;
}
.slider-meta .tag-post a {    margin-right: 8px;
color: #fff;
margin-bottom: 6px;}
.slider-meta .tag-post{
margin-right: 8px;
color: #fff;
margin-bottom: 6px;
float: right;
}
#related-posts .mag-content .recent-meta p {
color: #fff;
font-size: 13px;
padding: 0 22px;
}
#main-sliderone .mag-content .recent-meta p {
color: #fff;
font-size: 13px;
padding: 0 22px;
}
#main-sliderone ul li,#related-posts ul li {
position: relative;
overflow: hidden
}
#main-sliderone ul li:hover img.katib-img {
transform: rotate(360deg);
transition: 0.3s;
}
#related-posts .mag-thumb >a {
display: block;
height: 250px;
}
#main-sliderone .mag-thumb >a {
display: block;
height: 350px;
}
#main-sliderone .owl-controls .owl-nav >div {
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: 5px;
background: #fff;
cursor: pointer;
color: #f88e21;
line-height: 44px;
text-align: center;
display: inline-block;
transition: 0.3s;
}
#main-sliderone .owl-controls .owl-nav >div:hover {
box-shadow: 0px 0px 0px 3px #ffffff inset;
transition: 0.3s;
transform: rotate(360deg);
background: #f88e21;
color: white;
}
#main-sliderone .owl-controls {
position: absolute;
top: 24px;
right: 12px;
}
img.katib-img {
width: 44px !important;
position: absolute;
transition: 0.3s;
left: 3%;
border-radius: 50%;
background: #f88e21;
top: 6%;
border: 2px #fff;
border-style: solid;
z-index: 2;
padding: 2px;
}
#related-posts {
height: 250px;
}
div#main-sliderone {
height: 350px;
}

واخر شي  اضافه صندوق السلايد في المكان الدي يناسبك  ابحث في القالب ctrl و f عن رسائل وضع الكود فوقه او في المكان الدي تختاره انت وثم ادهب للتخطيط ستجد اسم sliderone اضغط تحرير ثم غير القسم بي القسم الخاص بك مثلا برامج

  <b:section class='section' id='main-sliderone'>
    <b:widget id='HTML140' locked='false' title='' type='HTML'>
      <b:widget-settings>
        <b:widget-setting name='content'>حلقات</b:widget-setting>
      </b:widget-settings>
      <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>

ابحث عن ]]></b:skin> كود جافا سكربت ابحث عن </body> وضعه فوقه قم بتحميل الكود من هنا

ان شا الله استفدو ادا واجهتك مشكله ضع تعليق 

لاتنسئ مشاركه الموضوع مع السلامه