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

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

السلايدر انيق جدا وسلس وطريقة تركيبه سهلة ايضا

اولا يمكنك معاينته من خلال الزر التالي

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.box-tag a{padding:2px 8px;background-color:#3cbd1b;color:#fff!important;font-size:11px;z-index:999;font-weight:400;margin-bottom:5px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.2)}.recent-slider .carousel{position:relative;margin:30px 0 25px!important;padding:0;overflow:visible;height:auto;display:block;clear:both}.recent-slider .carousel h2{display:none}.main-carousel{overflow:hidden}.carousel-abdoutech{padding:0!important;position:relative;overflow:hidden;list-style:none}.carousel-thumb{width:100%;height:380px;position:relative;display:block}.carousel-abdoutech .box-image{width:100%;height:100%;position:relative;display:block}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://4.bp.blogspot.com/--OzH85Gymqc/Wdim0oCVnaI/AAAAAAAAA48/89VTnKzv4HEVKS3tixaIiUbI3PPbjnOWgCLcBGAs/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-content,.featured .post-panel{transition:all .35s;box-sizing:border-box}.boxes ul li:hover .box-image:after,.bx-first:hover .bf-thumb:after,.carousel-abdoutech:hover .box-image:after{opacity:.2}.carousel-content{position:absolute;bottom:0;background:rgba(0,0,0,.31);width:100%;z-index:2;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s;padding:15px;text-align:right}.main-carousel .owl-dots,.owl-carousel .owl-item:hover .carousel-content{bottom:10px}.carousel-abdoutech .recent-title{margin:10px 0 3px;font-size:18px;font-weight:600}.carousel-abdoutech .recent-title a{color:#fff;display:inline-block;line-height:1.2em;text-shadow:0 .5px .5px rgba(34,34,34,.3)}.carousel-abdoutech .recent-date{color:#ccc}.carousel-tag a{padding:2px 8px;background-color:red;color:#fff!important;font-size:11px;z-index:999;font-weight:400;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.3)}.main-carousel .owl-next,.main-carousel .owl-prev{margin-top:0;font-size:25px;line-height:40px;position:absolute;top:170px;width:47px;height:47px;cursor:pointer;z-index:999}.main-carousel .owl-prev{right:0;background:url(https://3.bp.blogspot.com/-ADZMmpLRh0Q/WdimNULjiRI/AAAAAAAAA40/l12f8MdQUCEMYSNV95wHA_EbQ8HLu3WAQCLcBGAs/s1600/next.png) 100% 0 no-repeat}.main-carousel:hover .owl-prev{right:0}.main-carousel .owl-next{left:0;background:url(https://3.bp.blogspot.com/-ADZMmpLRh0Q/WdimNULjiRI/AAAAAAAAA40/l12f8MdQUCEMYSNV95wHA_EbQ8HLu3WAQCLcBGAs/s1600/next.png) no-repeat}.main-carousel:hover .owl-next{left:-1px}.recent-date{color:#bdbdbd;font-size:12px;font-weight:400}.featured-date:before,.recent-date:before{content:'\f017';font-family:fontawesome;margin-left:5px}.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;-moz-transition:height .5s ease-in-out;-ms-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel{display:none;width:100%;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(0,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;-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:right;-webkit-backface-visibility:visible;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-dots,.owl-next,.owl-prev{position:absolute;text-align:center}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:left}.no-js .owl-carousel{display:block}.owl-next,.owl-prev{top:0;color:#1c1c1c;background-color:rgba(255,255,255,.8);font-family:FontAwesome;z-index:1;display:block;cursor:pointer;padding:0;overflow:hidden}.owl-prev{right:0}.owl-next{left:0}.owl-dots{bottom:1px;width:33.33%;right:0;left:0;margin:auto}.star_rating{position:absolute;top:0;left:0;z-index:2;font-size:14px;padding:5px 10px;background:rgba(35,40,45,.6)}li.carousel-abdoutech .star_rating .fa:nth-child(1){color:red}li.carousel-abdoutech .star_rating .fa:nth-child(2){color:#f50}li.carousel-abdoutech .star_rating .fa:nth-child(3){color:#fa0}li.carousel-abdoutech .star_rating .fa:nth-child(4){color:#3cbd1b}li.carousel-abdoutech .star_rating .fa:nth-child(5){color:#127adb}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://4.bp.blogspot.com/--OzH85Gymqc/Wdim0oCVnaI/AAAAAAAAA48/89VTnKzv4HEVKS3tixaIiUbI3PPbjnOWgCLcBGAs/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-abdoutech .box-image:after{content:'';opacity:.8;transition:all .35s;right:0;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s}.carousel-abdoutech:hover .box-image:after{opacity:.2}
</style>
<link href='//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/>
<script data-cfasync='false' src='//rawgit.com/abdelalilebbihi/abdou_tech/master/OwlCarousel.js' type='text/javascript'/>
</b:if>

الان في الخطوة الثانية إبحث على </body>

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

الان اذا اردت تغيير التسمية ما عليك سوى تغيير كلمة سينما بتسمية من تسمياتك

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

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

Unknown 23 أبريل 2018 في 4:07 م

ابداع يا فنان كانت فين

Unknown 23 أبريل 2018 في 6:49 م

ممكن شرح طريقة عمل وصف لكل قسم فى مدونة بلوجر لزيادة الارشفة لو سمحت يا ا خى عبدو
- عبدو تكنولوجي - Abdou Technologie 23 أبريل 2018 في 8:32 م
  
  ممكن تشرح اكثر

Unknown 23 أبريل 2018 في 10:16 م

ممكن تصميم سلايد شو مثل هذا http://i.imgur.com/spajnf4.jpg
- عبدو تكنولوجي - Abdou Technologie 24 أبريل 2018 في 1:25 ص
  
  تواصل معي في صفحة اتصل بنا

Unknown 23 أبريل 2018 في 10:18 م

ممكن شرح طريقة عمل وصف لكل قسم فى مدونة بلوجر مثل برامج افلام سيما مش دى اقسام لزيادة الارشفة لو سمحت يا ا خى عبدو

KSoufiane 27 مايو 2018 في 7:11 م

في مشكل بالسلايدر !
يظهر بشل افوقي عكس مافي الصورة
- عبدو تكنولوجي - Abdou Technologie 27 مايو 2018 في 8:33 م
  
  ممكن معاينة

KSoufiane 28 مايو 2018 في 11:09 م

https://aranimer.blogspot.com/

المعاينة
- عبدو تكنولوجي - Abdou Technologie 28 مايو 2018 في 11:49 م
  
  رائيت الكواد هذا <script data-cfasync='false' src='//rawgit.com/abdelalilebbihi/abdou_tech/master/OwlCarousel.js' type='text/javascript'></script>
  
  انتا ضعه فوق ال </body>
  
  وإن لم تنجح راسلني على صفحة اتصل بنا (li)

Unknown 31 يوليو 2018 في 4:01 ص

اخي السلايد لا يظهر وتظهر مكانة هذا الكود فقط ]]>

معاينة https://hdgfx55.blogspot.com/
- عبدو تكنولوجي - Abdou Technologie 31 يوليو 2018 في 8:20 ص
  
  اعد وضع المرحلة الاخيرة بشكل صحيح

Unknown 31 يوليو 2018 في 4:26 م

أزال أحد مشرفي المدونة هذا التعليق.

Kaito dz 25 أغسطس 2018 في 10:26 م

السلام عليكم أخي السلايدر يظهر عندي لكن هناك مشكل بسيط وهو انه لدي 7 مواضيع لقسم ما اردت ااظهاراها فلما قمت بالمعاينة ظهرت المواضيع لكن ناقص واحد مما يعني انه عندما اضيف موضوع 8 يظهر 7 وعندما اضيف 9 يظهر 8 فقط كيف اجعلها تظهرها كلها