سلايد شو لمدونات بلوجر يعرض اكثر من قسم - سلايد شو رقم 13 كتبها: المدون التقني

سلايد شو لمدونات بلوجر يعرض اكثر من قسم - سلايد شو رقم 13 كتبها: المدون التقني - الخبير عامر بشير

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

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير

شرح اليوم على اضافة سلايد شو جديد الشكل ومختلف على المواضيع السابقة على اشكال سلايد شو

يمكنك معاينة من هنا

شرح طريقة التركيب

اولا ابحث في القالب على وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isHomepage'><link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/><style type="text/css">/*<![CDATA[*/ /*===================================== = slider =====================================*/ .sliders{display:none} .slider-card{direction:ltr;height:503px;position:relative;overflow:hidden;padding-top:25px;background:-webkit-linear-gradient(#2c2d2c,#131514);background:linear-gradient(#2c2d2c,#131514)} .backImage{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-position:center;filter:blur(0)} .slider-card .QualitySpan{text-align:center;color:#323232;position:absolute;right:10px;top:10px;background:#fff;font-size:14px;padding:4px 8px;border-radius:4px;font-weight:700;border:0;font-family:font,neo;box-shadow:0 0 5px rgba(0,0,0,.5490196078431373)} .slider-card>span.nextslider-card{-webkit-transform:translate(-80px,0);transform:translate(-80px,0);position:absolute;-webkit-transition:.3s all ease;transition:.3s all ease;width:60px;height:60px;border-radius:15px;top:50%;left:20px;background:#262626;margin-top:-30px;z-index:10;box-shadow:0 1px 16px rgba(0,0,0,.47);line-height:54px;text-align:center;color:#fafafa;cursor:pointer;padding-top:5px;font-size:35px;padding-right:8px} .slider-card>span.prevslider-card{-webkit-transform:translate(80px,0);transform:translate(80px,0);position:absolute;-webkit-transition:.3s all ease;transition:.3s all ease;width:60px;border-radius:15px;height:60px;top:50%;right:20px;box-shadow:0 1px 16px rgba(0,0,0,.47);background:#262626;margin-top:-30px;z-index:10;padding-top:5px;line-height:53px;cursor:pointer;text-align:center;color:white;font-size:31px;padding-right:0;padding-left:2px} .slider-card:hover>span{-webkit-transform:translate(0);transform:translate(0)} .slider-card li .container{height:500px;position:relative;width:1200px;margin:0 auto} .bottomBarDetails>.social-shares{float:right;color:#ddd;font-weight:700;font-size:12px;left:initial;margin-left:8px;position:static;border-top:0;padding-top:0;margin-top:0} .owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%} .slider-card .owl-item{overflow:hidden} .owl-item .imdbSpan{-webkit-transition:.3s all ease;transition:.3s all ease;position:absolute;top:42px;left:10px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.43);background:#efaf22;z-index:100;font-weight:700;font-size:17px;color:#2f2f2f;padding:5px 10px 6px;font-family:neo} .slider-card li{list-style:none;padding-top:10px;height:590px;position:relative;z-index:1;-webkit-transition:.1s all linear;transition:.1s all linear;background-repeat:no-repeat;background-size:100%;background-position:0% 25%} .slider-card li a:nth-child(5){display:none} .slider-card li:before{content:'';position:absolute;top:-10%;left:-10%;z-index:-2;width:120%;opacity:.3;-webkit-filter:blur(3px);height:120%;background-size:100%;background-position:center} .coverSlider{height:100%;overflow:hidden;background-position:top center;background-size:cover;position:relative;-webkit-transition:.3s all ease;transition:.3s all cubic-bezier(.56,.28,.34,1.34)} .slider-card li a .coverSlider:after{content:'';position:absolute;top:0;right:0;width:100%;height:100%;background:-webkit-linear-gradient(transparent,rgba(0,0,0,.84));background:linear-gradient(transparent,rgba(0,0,0,.84));-webkit-transition:.4s .1s all ease;transition:.4s .1s all ease;opacity:0;-webkit-transform:translate(0,150px);transform:translate(0,150px)} .titleSmalled{position:absolute;bottom:0;right:0;width:100%;font-size:19px;-webkit-transform:translate(0,0%);transform:translate(0,0%);background:-webkit-linear-gradient(transparent,rgba(0,0,0,.84));background:linear-gradient(transparent,rgba(0,0,0,.84));font-weight:700;padding:30px 15px 10px;color:white;-webkit-transition:.3s all ease;transition:.3s all cubic-bezier(.56,.28,.34,1.34)} .slider-card li a:hover .titleSmalled{-webkit-transform:translateY(-29px);transform:translateY(-29px)} .YearSpan{position:absolute;top:10px;left:10px;background:rgba(33,33,33,.88);border-radius:4px;padding:3px 6px 2px;font-weight:700;color:white;z-index:10;font-family:neo;font-size:13px} .YearSpan i{margin-left:3px} .posterSlider{width:90px;height:110px;border:3px solid #f3f3f3;box-shadow:0 1px 3px rgba(0,0,0,.37);position:absolute;top:195px;right:12px;-webkit-transform:translate(110px,0);transform:translate(110px,0)} .slider-card li a:hover .posterSlider{-webkit-transform:translate(0,0);transform:translate(0,0);-webkit-transition:.4s .2s all ease;transition:.4s .2s all cubic-bezier(.56,.28,.34,1.34)} .slider-card li a img{width:100%;height:100%} .detailsDesc{height:113px;background:-webkit-linear-gradient(rgb(0,0,0),rgba(0,0,0,.54));background:linear-gradient(rgb(0,0,0),rgba(0,0,0,.54));border-top:2px solid rgb(2,2,2);padding:15px 23px;font-size:15px;font-weight:700;color:#efefef} .bottomBarDetails{position:absolute;top:9px;right:9px} .bottomBarDetails>div>div{background:rgba(255,255,255,.7607843137254902);margin-bottom:4px;padding:4px 8px;border-radius:7px;font-size:13px;color:#000;font-weight:700;-webkit-transition:.4s all ease;-moz-transition:.4s all ease;-o-transition:.4s all ease;transition:.4s all ease;-webkit-transform:scale(0);transform:scale(0)} .bottomBarDetails>div>div:nth-child(1){transition-delay:.1s} .bottomBarDetails>div>div:nth-child(2){transition-delay:.2s} .bottomBarDetails>div>div:nth-child(3){transition-delay:.3s} .bottomBarDetails>div>div:nth-child(4){transition-delay:.4s} a.box:hover .bottomBarDetails>div>div{transform:scale(1)} .bottomBarDetails>div>div i{margin-left:4px} .slider-card li a{right:0;box-shadow:0 1px 6px rgba(0,0,0,.54);height:433px;overflow:hidden;text-align:right;direction:rtl;display:inline-block;position:relative;width:24.1%;width:calc(25% - 10px);float:right;margin-right:5px;margin-left:5px;border:3px solid #fff} .slider-card li a:hover .coverSlider{height:316px} .slider-card li a:hover .titleHovered{-webkit-transform:translateY(-120px);transform:translateY(-120px);-webkit-transition:.4s .2s all ease;transition:.4s .2s all cubic-bezier(.56,.28,.34,1.34)} .slider-card li a:hover .coverSlider:after{opacity:1;-webkit-transform:translate(0);transform:translate(0)} .slider-card li a:hover .bottomBarDetails{-webkit-transform:scale(1);transform:scale(1)} @media (max-width:1199px){.slider-card{height:initial;padding-bottom:10px}.slider-card li .container{width:100%;height:initial}.slider-card li{height:initial}.slider-card li a{width:24%;width:calc(25% - 10px);height:293px}.posterSlider{display:none}.titleSmalled{font-size:15px}.slider-card li a:hover .titleSmalled{-webkit-transform:translateY(0);transform:translateY(0)}} @media (max-width:767px){.slider-card li a{width:48%;width:calc(50% - 10px);margin-bottom:10px}} @media (max-width:399px){.slider-card li a{height:200px}} /*]]>*/ </style></b:if>

ثانيا ابحث في القالب على وضع هذا الكود فوقه
تحميل الكود من هنا

الان ضع الكود التالي في اي مكان تريده

<b:section class='sliders' id='slider' cond='data:view.isHomepage'>  <b:widget id='TextList2' locked='false' title='اقسام الموقع' type='TextList' version='2' visible='true'>    <b:widget-settings>      <b:widget-setting name='shownum'/>      <b:widget-setting name='item-6'>حيوانات</b:widget-setting>      <b:widget-setting name='item-5'>قهوة</b:widget-setting>      <b:widget-setting name='item-4'>رسوم</b:widget-setting>      <b:widget-setting name='item-3'>عقل</b:widget-setting>      <b:widget-setting name='sorting'>NONE</b:widget-setting>      <b:widget-setting name='item-2'>ألوان</b:widget-setting>      <b:widget-setting name='item-1'>ابداع</b:widget-setting>      <b:widget-setting name='item-0'>فنون</b:widget-setting>    </b:widget-settings>    <b:includable id='main'>  <b:include name='content'/></b:includable>    <b:includable id='content'><div class='slider-card'>     <div class='backImage' style='background-image: url()'/>  <span class='nextslider-card'><i class='fa fa-chevron-left'/></span>  <span class='prevslider-card'><i class='fa fa-chevron-right'/></span>   <b:tag class='slides owl-carousel owl-theme  wow' data-wow-duration='1s' name='div'> <b:loop values='data:items' var='item2'><b:tag expr:data-qism='data:item2' id='slide-1Cover' name='li'/></b:loop></b:tag>      </div></b:includable>  </b:widget></b:section>

الان احفظ و إذهب الى التخطيط واضف التسميات التي تريد ضهور لها مواضيع

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2019/06/13.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2019/06/13.html">سلايد شو لمدونات بلوجر يعرض اكثر من قسم - سلايد شو رقم 13 كتبها: المدون التقني  - الخبير عامر بشير</a>

الموضوع من قسم:

اضافات بلوجر بلوجر سكربت سلايد شو سلايدر شو

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

عن المدونة

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