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

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

18 يوليو 2018

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

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي اليوم اقدم لكم سلايد شو إحترافي كباقي السلايدرات التي انشرها لاكن ما يميز هذا السلايدر هوا شكل البسيط من واجهة واحدة و شريط تنقل إحترافي مع عنوان و صورة كخلفية و ملخص الموضوع

يمكنك معاينة الاضافة من خلال الرابط التالي من هنا

طريقة التركيب سهلة

1- إبحث على </head> او </head او <head/> او <head/

وضع لكود التالي فوقه مباشرة

<style>
/* abdou tech Slider
------------------------------ */
.SliderMaster{height:400px;overflow:hidden;margin-bottom:16px;margin-top:-44px}
.SliderMaster>.owl-carousel{height:100%;width:calc(100% - 380px);overflow:hidden;float:right;margin-right:0}
li.article_postBlock{height:368px;z-index:1;margin:16px;border-radius:13px;position:relative;overflow:hidden;box-shadow:0 2px 5px 0 rgba(0,0,0,0.21),0 2px 8px 0 rgba(0,0,0,.12)}
li.article_postBlock .BGCover{position:absolute;top:0;right:0;width:100%;height:100%;background-size:cover;z-index:-1;background-repeat:no-repeat;background-position:center}
.DetailsCover{position:absolute;top:0;right:0;width:500px;direction:rtl;height:100%;background:#1d1d21e0;padding:23px 30px;color:#fff}
.DetailsCover>h2{text-align:right;font-size:20px;line-height:25px;margin-bottom:6px}
.CoverDetailsBlock{display:inline-block;width:100%;margin-bottom:10px}
.CoverDetailsBlock>div{float:right;font-weight:700;margin-left:15px;color:#ddd;font-size:12px}
.CoverDetailsBlock>div a{color:#ddd}
.article_Cover{font-size:13px;max-height:207px;text-align:right;line-height:22px;color:#ffffffcf;overflow:auto;border-top:1px solid #dddddd38;padding-top:10px}
.DetailsCover a.readmore_Button{position:absolute;bottom:20px;left:20px;padding:0 11px;color:#fff;background:#26a69a;font-size:19px;line-height:21px;padding-top:9px;border-bottom:2px solid #0000005c;border-radius:50px;width:40px;height:40px}
.DetailsCover a.readmore_Button  i{float:right;font-size:19px;margin-right:4px;padding-top:1px}
.owl-dots{position:absolute;bottom:0;left:5px}
.SliderMaster .owl-dots{background:#000000a6;height:25px;padding:4px 7px 7px 11px;z-index:100;border-radius:10px;bottom:20px;left:22px}
.SliderMaster .owl-dots .owl-dot.active{width:12px;background:#26a69a}
.SliderMaster .owl-dots .owl-dot{width:18px;height:12px;background:#fff;display:inline-block;margin-right:5px;transition:.3s all ease;border-radius:15px;cursor:pointer}
.CoverDetailsBlock>div>span{font-size:12px;color:#ddd;display:inline-block;padding-right:6px}
@media screen and (max-width:480px){.DetailsCover{width:100%}.SliderMaster .owl-dots{right:38px}}
</style>
<link href='//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet' type='text/css'/>
<script async='async' src='//rawgit.com/abdelalilebbihi/abdou_tech/master/OwlCarousel.js' type='text/javascript'></script>
<script src='//rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/slider_v7.js' type='text/javascript'></script>

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

تحميل الكود من هنا او من هنا

لا تنسى تغيير التسمية من التخطيط

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

Unknown 19 يوليو 2018 في 1:43 ص

نريد نشر اضافات اكثر وأفضل
- عبدو تكنولوجي - Abdou Technologie 22 يوليو 2018 في 11:06 ص
  
  ابذل كل قصار جهدي لكي اوفر افضل الاضافات
  
  شكرا على مرورك

جيك برو | Geek Pro 20 يوليو 2018 في 12:28 ص

لو سمحت اخي عبدو تقدر تجبلنا القالب ده + اسكربت الخاص بتغيير الصورة حسب الكلمه https://arbfonts.com
- عبدو تكنولوجي - Abdou Technologie 22 يوليو 2018 في 11:07 ص
  
  انا اسف ذالك السكربت لن ينجح في بلوجر

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