سلايد شو لمدونات بلوجر بشكل مميز ويتحرك ب عجلة الماوس | الشكل الثامن

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

اقدم لكم سلايدر شو بنسخة الثامنة بعد ما نشر عدة نسخ و البعض منهم 

1. سلايد شو ارلينا ديزاين الاحترافي لعرض اخر المواضيع لمدونات بلوجر
2. سلايد شو احترافي يعرض المواضيع حسب التسمية الاصدار الثالث
3. سلايد شو يعرض المواضيع حسب التسمية الشكل الرابع
4. سلايد شو احترافي بشكل جديد يعرض المواضيع حسب التسمية
5. سلايد شو الشكل الخامس لمدونات بلوجر
6. سلايد شو حسب التسمية لمدونات بلوجر | الشكل السادس
7. سلايد شو حسب التسمية لمدونات بلوجر إحترافي | الشكل السابع

لاكن شكل اليوم متغيير عن الباقي فهوا يتميز ب فلاتر إحترافية ومميزة ومتجاوب مع جميع المقاييس

يمكنك معاينة السلايد شو من هنا

الان نشرح كيفية التركيب

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

<b:if cond='data:view.isHomepage'><link href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css' id='swiper-css' media='all' rel='stylesheet' type='text/css'/><style type='text/css'>.abdoutech-slider{width:95%;position:relative;max-width:800px;margin:auto;background:#fff;box-shadow:0 14px 80px rgba(34,35,58,0.2);padding:25px;border-radius:25px;height:400px;transition:all .3s} @media screen and (max-width:992px){.abdoutech-slider{max-width:680px;height:400px}} @media screen and (max-width:768px){.abdoutech-slider{min-height:500px;height:auto;margin:180px auto}} @media screen and (max-height:500px) and (min-width:992px){.abdoutech-slider{height:350px}} .abdoutech-slider__item{display:flex;align-items:center} @media screen and (max-width:768px){.abdoutech-slider__item{flex-direction:column}} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__img img{opacity:1;transition-delay:.3s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *{opacity:1;transform:none} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(1){transition-delay:0.3s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(2){transition-delay:0.4s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(3){transition-delay:0.5s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(4){transition-delay:0.6s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(5){transition-delay:0.7s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(6){transition-delay:0.8s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(7){transition-delay:0.9s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(8){transition-delay:1s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(9){transition-delay:1.1s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(10){transition-delay:1.2s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(11){transition-delay:1.3s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(12){transition-delay:1.4s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(13){transition-delay:1.5s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(14){transition-delay:1.6s} .abdoutech-slider__item.swiper-slide-active .abdoutech-slider__content > *:nth-child(15){transition-delay:1.7s} .abdoutech-slider__img{width:300px;flex-shrink:0;height:300px;background-image:linear-gradient(147deg,#fe8a39 0%,#fd3838 74%);box-shadow:4px 13px 30px 1px rgba(252,56,56,0.2);border-radius:20px;transform:translateX(80px);overflow:hidden} .abdoutech-slider__img:after{content:'';position:absolute;top:0;right:0;width:100%;height:100%;background-image:linear-gradient(147deg,#fe8a39 0%,#fd3838 74%);border-radius:20px;opacity:0.8} .abdoutech-slider__img img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;border-radius:20px;transition:all .3s} @media screen and (max-width:768px){.abdoutech-slider__img{transform:translateY(-50%);width:90%}} @media screen and (max-width:576px){.abdoutech-slider__img{width:95%}} @media screen and (max-height:500px) and (min-width:992px){.abdoutech-slider__img{height:270px}} .abdoutech-slider__content{padding-left:29px;text-align:right;} @media screen and (max-width:768px){.abdoutech-slider__content{margin-top:-80px;text-align:center;padding:0 30px}} @media screen and (max-width:576px){.abdoutech-slider__content{padding:0}} .abdoutech-slider__content > *{opacity:0;transform:translateY(25px);transition:all .4s} .abdoutech-slider__code{color:#7b7992;margin-bottom:15px;display:block;font-weight:500;font-size:13px;font-family:inherit;} .abdoutech-slider__title{font-size:24px;font-weight:700;color:#0d0925;margin-bottom:20px} .abdoutech-slider__text{color:#4e4a67;margin-bottom:30px;line-height:1.5em} .abdoutech-slider__button{ display:inline-flex;background-image:linear-gradient(147deg,#fe8a39 0%,#fd3838 74%);padding:15px 35px;border-radius:50px;color:#fff;box-shadow:0 14px 80px rgba(252,56,56,0.4);text-decoration:none;font-weight:500;justify-content:center;text-align:center;letter-spacing:1px;float:right;margin-right:3%;} @media screen and (max-width:576px){.abdoutech-slider__button{width:100%}} .abdoutech-slider .swiper-container-horizontal > .swiper-pagination-bullets,.abdoutech-slider .swiper-pagination-custom,.abdoutech-slider .swiper-pagination-fraction{bottom:10px;right:0;width:100%} .abdoutech-slider__pagination{position:absolute;z-index:21;left:12px!important;width:11px!important;text-align:center;right:auto!important;top:50%;bottom:auto!important;transform:translateY(-50%)} @media screen and (max-width:768px){.abdoutech-slider__pagination{transform:translateX(50%);right:50%!important;top:205px;width:100%!important;display:flex;justify-content:center;align-items:center}} .abdoutech-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet{margin:8px 0} @media screen and (max-width:768px){.abdoutech-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px!important}} .abdoutech-slider__pagination .swiper-pagination-bullet{margin: 3px 0 !important;width:11px;height:11px;display:block;border-radius:10px;background:#062744;opacity:0.2;transition:all .3s} .abdoutech-slider__pagination .swiper-pagination-bullet-active{opacity:1;background:#fd3838;height:21px;box-shadow:0 0 20px rgba(252,56,56,0.3)} @media screen and (max-width:768px){.abdoutech-slider__pagination .swiper-pagination-bullet-active{height:11px;width:30px}} </style> </b:if>

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

<b:if cond='data:view.isHomepage'><script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'/><script src='https://rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/slider-v8.js'/></b:if>

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

<div class="abdoutech-slider" expr:data-blog='data:blog.homepageUrl'/>

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

شارك هذا