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

Admin Amer

يوليو 18, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

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

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

1- إبحث على او  او 

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

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

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

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

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

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2018/07/blog-post_18.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2018/07/blog-post_18.html">سلايد شو حسب التسمية لمدونات بلوجر إحترافي | الشكل السابع كتبها: المدون التقني - الخبير عامر بشير</a>