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

Admin Amer

سبتمبر 08, 2018

0 تعليقات

شاركه غرد جوجل+

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

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

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

الاشكال

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

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

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

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

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

<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>

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

<b:if cond='data:view.isHomepage'><script src='https://rawgit.com/abdelalilebbihi/abdou_tech/master/OwlCarousel-2.js'/><script src='https://rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/slider-9.js'/></b:if>

1. الان ضع الكود التالي في المكان الذي تريد ضهور فيه السلايدر

<b:if cond='data:view.isHomepage'><b:section class='rtl' id='int-two'> <b:widget id='HTML102' locked='false' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><![CDATA[<span class='hide'>random</span>]]></b:widget-setting> </b:widget-settings> <b:includable id='main'><style>#HTML102,.I-toggle{display:block;}</style><i class='intro-ch hide'>random</i><div class='r-loading'><i class='fa fa-spin fa-spinner'></i><span>جاري التحميل ...</span></div><div class='widget-content intro owl-carousel' data-slides="4"><data:content/></div><div class="I-toggle"><i class="fa fa-angle-double-down"></i></div></b:includable> </b:widget></b:section> </b:if>

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

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

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2018/09/blog-post_8.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2018/09/blog-post_8.html">سلايد شو بعدة اشكال مختلفة لمدونات بلوجر | الشكل التاسع كتبها: المدون التقني - الخبير عامر بشير</a>