اضافة سلايد شو حسب التسمية لمدونات بلوجر إحترافي | الشكل السابع
اليوم اقدم لكم سلايد شو إحترافي كباقي السلايدرات التي انشرها لاكن ما يميز هذا السلايدر هوا شكل البسيط من واجهة واحدة و شريط تنقل إحترافي مع عنوان و صورة كخلفية و ملخص الموضوع
شرح طريقة التركيب
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- الان ضع هذا الكود في المكان الذي تريد ظهور فيه السلايدر
لا تنسى تغيير التسمية من التخطيط
الان إحفظ القالب و مبروك عليك الاضافة واذا اعجبتك الاضافة لا تنسى الاشتراك في الموقع لكي تتوصل بكل ما هوا جديد
add_comment ليست هناك تعليقات:
إرسال تعليق