سلايد شو تلقائي متجاوب مع الاجهزة الذكية

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

سلايد شو تلقائي ومتجاوب مع الاجهزة الذكية
سلايد شو تلقائي ومتجاوب مع الاجهزة الذكية

طريقة التركيب سلايد شو لمدونات بلوجر:

1- قم بدخول الى مدونتك ثم المظهر وقم بالبحث عن الوسم التالي.

]]></b:skin>

عند ايجاده قم بوضع الكود التالي فوقه.

.devt-slider{
background: #fff;
position:relative;
margin-top: 2px;
}
.devt-slider ul{clear:both;list-style:none}
.devt-slider ul li{height:260px;position:relative}.devt-slider ul li a{text-decoration:none;display:inline-block;height:100%;width:100%;position:relative}
.devt-slider ul li a img{display:block;position:relative;height:100%;width:100%}
.devt-slider ul li a:after{transition:all 0.3s ease-in-out;content:””;position:absolute;width:100%;height:100%;z-index:1000;top:0;right:0;background:rgba(42, 94, 121,0.2)}
.devt-slider ul li a div{-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;z-index:100000;display:block;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;height;auto;position:absolute;color:#ddd;bottom:0px;right:0;text-align:right;
background-image: -webkit-linear-gradient(transparent,rgba(0, 0, 0,0.5));
background-image: -moz-linear-gradient(transparent,rgba(0, 0, 0,0.5));
background-image: linear-gradient(transparent,rgba(0, 0, 0,0.5));
overflow: hidden;
transition: 0.2s;
vertical-align: middle;
text-align: right;
}
.devt-slider ul li a:hover div {
background-image: -webkit-linear-gradient(transparent,rgba(0, 0, 0,0.9));
background-image: -moz-linear-gradient(transparent,rgba(0, 0, 0,0.9));
background-image: linear-gradient(transparent,rgba(0, 0, 0,0.9));
padding-bottom:20px;
}
.devt-slider ul li a div h4{font-size:14px;font-family:”Droid Arabic Naskh”,tahoma;color:#eee;}
.devt-slider ul li a div i,.devt-slider ul li a div span{font-size:10px;direction:rtl;display:inline-block}
.devt-slider ul li a div span{padding-left:10px;font-size:11px;font-family:”Droid Arabic Naskh”,tahoma}
.devt-slider ul li a div i{padding-left:4px}
.devt-slider ul li a:hover:after{background:rgba(61,61,61,0);)}
.devt-slider .owl-nav{text-align:center;width:100%;height:0}
.devt-slider .owl-nav div{color:rgba(255,255,255,0.78);display:inline-block;font-size:55px;opacity:.9;text-shadow:2px 2px 9px rgba(0,0,0,0.65);width:30px;transition:0.3s}.devt-slider:hover .owl-nav div{opacity:1}.devt-slider .owl-nav div:hover{color:#fff}
.devt-slider .owl-prev{position:absolute;right:10px;bottom:40%;}
.devt-slider .owl-next{position:absolute;left:10px;bottom:40%;}
.devt-slider .owl-prev:before{content:”f105″;font-family:fontawesome}.devt-slider .owl-next:before{content:”f104″;font-family:fontawesome}.owl-carousel{display:none;width:100%;-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(0px,0px,0px)}.owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .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{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-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}

2- اعد البحث عن الوسم التالي.

</body>

عند ايجاده قم بوضع الكود التالي فوقه.

3- قم بالبحث مرة اخرى عن الكود التالي.

<div id=’main-wrapper’>

عند ايجاده قم بوضع الكود التالي فوقه.

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
  <b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
    <b:section class=’devt-slider’ id=’devt-slider’ showaddelement=’no’>
      <b:widget id=’HTML21′ locked=’true’ title=” type=’HTML’ visible=’true’>
        <b:includable id=’main’>
           <div class=’widget-content’>
             <data:content/>
           </div>
           </b:includable>
      </b:widget>
    </b:section>
 </b:if>
</b:if>

بعدها قم بحفظ القالب وانتقل الى التخطيط ستجد ظهور اضافة جديدة تخص السلايد، على الشكل التالي.
سلايد شو تلقائي ومتجاوب مع الاجهزة الذكية
سلايد شو تلقائي ومتجاوب مع الاجهزة الذكية
كل ما عليك فعله هو ضغط على تحرير وقم باضافة الكود التالي داخلها دون اضافة اي شيء اخر او عنوان، واضغط على حفظ.
<ul></ul>
ثم انتقل الى مدونتك وشاهد النتيجة.
كان هذا كل شيء، اتمنى ان تنال التدوينة اعجابكم، ولا تنسى اذا واجهت اي مشكلة في التركيب السلايد شو يمكنك تركه في تعليق وسيتم الرد عليك في اقرب وقت، سلام.
Next PostRead more articles

This Post Has 17 Comments

  1. Kacem kimou

    وعليكم السلام ومرحبا بك
    انا اسف لعدم الرد عليك، وذلك لعدم رؤيتي لرسالتك، لاني بصراحة لا استخدم الفيس بوك كثيرا

  2. غير معرف

    السلام عليكم اخي , ارسلت رسالة على الفيس بوك لك اخي الكريم

  3. Kacem kimou

    يا اخي لا تحذف اي شيء حتى لا تتسبب في مشاكل في قالب، واذا لم تعرف كيفية تركيب السلايد يسعدنا مساعدتك فقط قم بمراسلتنا على صفحتنا على الفيس بوك.

  4. تطبيقي Applied

    اخي الكود الذي قبل الاخير انا لدي كود مشابه له حذفته واضفت هاذا الكود لاكن القالب لا يقبل التثبيت

  5. Abdallah Hany

    الكود الاخير ليس عندي في القالب

    <div id='main-wrapper'"

  6. Kacem kimou

    شكرا على تنبيه تم تعديل الرابط 🙂

  7. Kacem kimou

    شكرا لك اخي على مرورك ومرحبا بك.

  8. Salah DZ

    كل الشكر والتقدير لك أخي على هذا المجهود موفق انشاء الله

  9. Kacem kimou

    يأخي قم بوضع رابط مدونتك للمعاينة

  10. Kacem kimou

    مرحبا بك اخي ..
    مشكلتك سهلة الحل فقط ابحث عن الكود التالي
    jazairiweb_wrap_jazairiweb wow bounceIn animated
    وضع فوقه الكود الذي في شرح …
    في حال لم تعرف كيفية تركيبها بطريقة صحيحة ارسل لي قالبك من خلال صفحتي على الفيسبوك ستجدها في اسفل المدونة وسنحل لك مشكلتك بإذن الله تحياتي.

  11. elsaed ali

    div id='main-wrapper'
    هذا الكود غير موجود عندى ايضا
    وهذا رابط مدونتى https://happyfarmhakr.blogspot.com/
    ان كنت تريد القالب بأكملة ليس لدى مشكلة

  12. Kacem kimou

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

  13. غير معرف

    <ul /ul
    لايعطي اي نتيجة

  14. Kacem kimou

    أخي يوجد هذه اضافة في مدونة قم بالبحث فقط في قسم بلوجر … شكراا

  15. Aymen Mosta

    اخي اريد اضافة شريط اخر الاخبار

اترك تعليقاً