إبحث في هذه المدونة

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

قنا قد قدمنا لكم في تدوينات سابقة 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>
ثم انتقل الى مدونتك وشاهد النتيجة.
كان هذا كل شيء، اتمنى ان تنال التدوينة اعجابكم، ولا تنسى اذا واجهت اي مشكلة في التركيب السلايد شو يمكنك تركه في تعليق وسيتم الرد عليك في اقرب وقت، سلام.

هناك 16 تعليقًا:

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

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

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

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

      حذف
  3. الردود
    1. شكرا على تنبيه تم تعديل الرابط :)

      حذف
    2. الكود الاخير ليس عندي في القالب

      <div id='main-wrapper'"

      حذف
    3. يأخي قم بوضع رابط مدونتك للمعاينة

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

    ردحذف
    الردود
    1. شكرا لك اخي على مرورك ومرحبا بك.

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

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

      حذف
  6. <ul /ul
    لايعطي اي نتيجة

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

      حذف
  7. اخي اريد اضافة شريط اخر الاخبار

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

      حذف