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

عبدو تكنولوجي - Abdou Technologie

8 سبتمبر 2018

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

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

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

الاشكال

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

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

سلايد شو قالب ليفون من عبدو تكنولوجي الشكل الثاني

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

سلايد شو قالب ليفون من عبدو تكنولوجي الشكل الثالث

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

الان بعد معاينة جميع الاشكال نبدأ في الشرح

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

<style type='text/css'>
<b:if cond='data:view.isHomepage'>
.fadeOut{opacity:0}
*:not(.notr){-webkit-transition:.3s ease-out;-o-transition:.3s ease-out;transition:.3s ease-out}
.hide{display:none}
/* ====================
* Owl Styles
* ==================== */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.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(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:-webkit-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform .1s ease;transition:-webkit-transform .1s ease;-o-transition:transform .1s ease;transition:transform .1s ease;transition:transform .1s ease, -webkit-transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);-webkit-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;background-size:contain;-webkit-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
/* ==================
* Intro Slider
* ================== */
.intro{overflow:hidden;display:none}
.Intro-Label{min-height:150px}
.intro[data-slides='3'] .Intro-Label:hover .Intro-Thumb{-webkit-transform:translate(0,-70px);-ms-transform:translate(0,-70px);transform:translate(0,-70px)}
.intro[data-slides='3'] .Intro-Details{position:absolute;bottom:-20px;padding:20px;width:100%;background-color:#120e28;height:73px}
.rtl .intro[data-slides='3'] .Intro-Details{right:0;text-align:right;}
.ltr .intro[data-slides='3'] .Intro-Details{left:0;text-align:left;}
.intro[data-slides='3'] .Intro-Label:hover .Intro-Details{bottom:0}
.intro[data-slides='3'] .Intro-Title{height:calc(100% - 70px);top:120px;margin-bottom:10px}
.intro[data-slides='3'] .Intro-Label:hover .Intro-Title{top:0;opacity:1}
.intro[data-slides='3'] .Intro-Label .ReadMore{background-color:#242135;color:#aaaaaa;position:absolute;bottom:-20px;font-size:12px;font-family:inherit;padding:10px 15px;-webkit-border-radius:3px;border-radius:3px;overflow:hidden}
.rtl .intro[data-slides='3'] .Intro-Label .ReadMore{left:20px;}
.ltr .intro[data-slides='3'] .Intro-Label .ReadMore{right:20px;}
.intro[data-slides='3'] .Intro-Label:hover .ReadMore{bottom:15px}
.intro[data-slides='3'] .Intro-Label .ReadMore:hover{background-color:#9e2f5e;color:#fff}
.intro[data-slides='1'] .Intro-Title{bottom:20px;-webkit-border-radius:3px;border-radius:3px;opacity:1;width:auto}
.rtl .intro[data-slides='1'] .Intro-Title{right:30px;}
.ltr .intro[data-slides='1'] .Intro-Title{left:30px;}
.intro[data-slides='1'] .Intro-Label{height:300px;margin-bottom:0}
.intro[data-slides='1'] .Intro-Thumb{height:auto;min-height:100%;position:relative;top:0}
.intro[data-slides='1'] .Intro-Details,.intro[data-slides='1'] .ReadMore{display:none}
.intro[data-slides='1'] .owl-item{padding:0}
.intro[data-slides='1'] .Intro-Cate{left:20px}
.intro[data-slides='1'] .Intro-Label:after{right:20px}
.intro[data-slides='4'] .Intro-Title{max-height:100%;bottom:-100%}
.intro[data-slides='4'] .Intro-Label:hover .Intro-Title{bottom:0;opacity:1}
.intro[data-slides='4'] .Intro-Details,.intro[data-slides='4'] .ReadMore{display:none}
.intro .owl-wrapper,.intro .owl-wrapper-outer{height:100%}
#int-two{margin:20px 30px 0}
a.Intro-Title:hover {color: #fff;}
.Intro-Label{width:100%;overflow:hidden;float:right;height:100%;position:relative;-webkit-border-radius:3px;border-radius:3px}
.rtl .Intro-Label{direction:rtl;}
.Intro-Cate{position:absolute;top:10px;left:10px;font-family:inherit;font-size:14px;z-index:3;color:#ffffff;opacity:.95;background-color:#9e2f5e;padding:5px 10px;-webkit-border-radius:3px;border-radius:3px}
.Intro-Thumb{width:100%;height:100%;position:relative;z-index:2}
.Intro-Label:after{content:"\f074";position:absolute;color:rgba(255,255,255,0.3);z-index:2;font-family:FontAwesome;font-size:24px;text-align:center;right:10px;top:3px}
.Intro-Label:hover .Intro-Cate,.Intro-Label:hover:after{opacity:0}
.Intro-Title{color:#fff;font-family:inherit;display:block;overflow:hidden;width:100%;position:absolute;text-align:center;background-color:rgba(0,0,0,0.8);padding:20px;z-index:2;opacity:0;font-size:19px}
.Intro-Date,.Intro-Author{display:block;font-family:inherit;font-size:12px;color:#aaaaaa;line-height:1em}
.rtl .Intro-Date, .rtl .Intro-Author{margin-left:20px;}
.ltr .Intro-Date, .ltr .Intro-Author{margin-right:20px;}
.Intro-Date:before,.Intro-Author:before{display:inline-block;font-family:fontawesome;font-size:14px;color:#aaaaaa;}
.rtl .Intro-Date:before, .rtl .Intro-Author:before{margin-left:5px}
.ltr .Intro-Date:before, .ltr .Intro-Author:before{margin-right:5px}
.Intro-Date{margin-bottom:10px}
.Intro-Date:before{content:"\f073"}
.Intro-Author:before{content:"\f007"}
.Intro-Date:hover,a.Intro-Author:hover{text-decoration:underline}
#HTML102 .owl-nav{position:absolute;top:-webkit-calc(50% - 30px);top:calc(50% - 30px);left:0;width:100%}
#HTML102 .owl-prev,#HTML102 .owl-next{color:#ffffff;font-family:fontawesome;font-size:25px;background-color:#9e2f5e;padding:8px 15px;top:0;height:39px;line-height:21px;position:absolute;-webkit-border-radius:3px;border-radius:3px;opacity:.3}
#HTML102 .owl-next{right:-50px}
#HTML102 .owl-prev{left:-50px}
#HTML102 .owl-carousel:hover .owl-prev{left:20px;opacity:.9}
#HTML102 .owl-carousel:hover .owl-next{right:20px;opacity:.9}
.I-toggle i{border:1px solid #dddddd;width:70px;text-align:center;-webkit-border-radius:100px;border-radius:100px;background-color:#ffffff;display:block;margin:-10px auto 0;color:#dddddd;cursor:pointer}
.I-toggle{display:none;border-top:1px dashed #dddddd;margin:-6% 30px 10px;}
.I-toggle i:hover{background-color:#dddddd;color:#ffffff;border:1px solid #ffffff}
#HTML102{min-height:160px;margin-bottom:20px;position:relative;direction:ltr!important}
.r-loading{position:absolute;top:-webkit-calc(50% - 31px);top:calc(50% - 31px);left:0;width:100%;text-align:center}
.r-loading i{color:#444;font-size:30px}
.r-loading span{font-family:inherit;color:#999;margin-top:10px;direction:rtl;display:block}
</b:if>
</style>

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

الان لتنقل بين الاشكال يكفيك تغيير الرقم 4 من هذا الكود data-slides="4" برقم الذي اعجبك في المعاينة

إذا اعجبتك الاضافة لا تنسى الاشتراك في المدونة لكي تتوصل بكل ماهوا جديد

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

Unknown 9 سبتمبر 2018 في 2:52 ص

اخي عبدو ليه ما تنزل لوحة تحكم انزال منشور جديد
- عبدو تكنولوجي - Abdou Technologie 9 سبتمبر 2018 في 3:16 ص
  
  لم افهمك اخي ؟

جيك برو | Geek Pro 9 سبتمبر 2018 في 4:43 م

وااااااااااااصل حبيبي شكراا علي الشرح الرائع بليز رد علي في فيسبوك
- عبدو تكنولوجي - Abdou Technologie 10 سبتمبر 2018 في 2:48 ص
  
  (li)

Unknown 9 سبتمبر 2018 في 9:28 م

لم يعمل معى اخى عبدو وها هوا القالب https://seif-ahmed-1.blogspot.com/
- عبدو تكنولوجي - Abdou Technologie 10 سبتمبر 2018 في 2:49 ص
  
  اوك راسلني و ارسلي دعوة سوف اركبه لك

Unknown 10 سبتمبر 2018 في 5:17 ص

اراسلك اين اخى
- عبدو تكنولوجي - Abdou Technologie 10 سبتمبر 2018 في 7:52 ص
  
  يوجد صفحة اتصل بنا رابطها في القائمة العلوية
  
  ومرحبا بك (li)

جيك برو | Geek Pro 14 سبتمبر 2018 في 12:18 م

ينفع نعمل شرح علي عمل قلب "(k)
" علي التعليقات في بلوجر كمثال :" مثل الموجوده في يوتيوب"

Khalid Amin 13 أكتوبر 2018 في 11:17 ص

اخي اين اضع الكود الثالث ف قالب ليفون

Joun Doe 29 أكتوبر 2018 في 9:26 ص

السليدرات مش شغالة تلقائى ياعبده

Read User 5 يناير 2019 في 11:38 م

اجوك اخي ساعدني في تشغيل الاضافة اول اشتغلت و بعدها توقفت نهائيا حتى في قوالب اخى لا ادري ليش ارجو المساعدة اخي الكريم ارجوك ؟؟؟؟؟؟؟؟؟؟؟؟ او راسلني في الفيسبوك https://www.facebook.com/hachadi.mohamad
او الايميل mhuserpro@gmail.com

maher 20 يناير 2019 في 6:43 م

اتمنى اصلاح المشكلة الخاصة بتحريك السلايرات

لانني ركبت السلايدر و هم رائعين و لكن بدون حركة هل يمكن اصلاحهم

و شكرا لك مسبقا

احمد 19 مارس 2019 في 3:44 ص

كنت اريد يا اخي سلايدر قالب سميل تك ارجوك ياخي في اسرع
وقت
- عبدو تكنولوجي - Abdou Technologie 20 مارس 2019 في 3:13 م
  
  انشالله يتم نشره

mks alaa 10 مايو 2019 في 1:01 ص

لايعمل