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

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

17 تعليق

اضف تعليق