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

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

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

الاشكال

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

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

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

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

1. إبحث على </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>

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

<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"  برقم الذي اعجبك في المعاينة

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

شارك هذا