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

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

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

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

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- الان ضع هذا الكود في المكان الذي تريد ضهور فيه السلايدر 

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

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

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

شارك هذا