menu
attachment
  • الصفحة الرئيسية
  • فهرس الموقع
  • شروط الاستخدام
  • سياسة الخصوصية
  • تبادل اعلاني
  • الابلاغ عن الروابط المعطوبة
notifications
موقع الوليد نت
  • تطوير مدونات بلوجر
  • _قوالب بلوجر
  • _اضافات بلوجر
  • _دروس بلوجر
  • _قوالب بلوجر مدفوعة
  • تطوير ووردبريس
  • _قوالب ووردبريس مجانية
  • _اضافات ووردبريس
  • الربح من الانترنت
  • سكربتات مجانية
  • خدمات عامة
  • مسابقات
    10|recentpost
  • موقع الوليد نت
  • اضافات بلوجر
  • اضافة سلايد شو حسب التسمية لمدونات بلوجر إحترافي | الشكل السابع
‪Walid Farouk‬‏
0

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

الخميس، 6 سبتمبر 2018
share
  • ‏المشاركة في Facebook
  • ‏المشاركة في Twitter
  • ‏المشاركة على Pinterest
  • إرسال بالبريد الإلكتروني
  • كتابة مدونة حول هذه المشاركة
settings_overscan print announcement

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

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


شرح طريقة التركيب
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- الان ضع هذا الكود في المكان الذي تريد ظهور فيه السلايدر 

تحميل الكود  تحميل اخر  تحميل اخر 

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


Share This
clear
  • الكاتب ‪Walid Farouk‬‏
    ‪Walid Farouk‬‏
    اهتم بما هو جديد في عالم الانترنت
  • آخر تحديث: سبتمبر 06, 2018
اضافات بلوجر

add_comment ليست هناك تعليقات:

إرسال تعليق

مواقع ندعمها

  • #ايجي بوكـ
  • #كوكب المحترفين
  • #بوابة الامبراطور
  • #خالد تك Khaled Tech
  • #ميجا بلس
  • #طارق أحمد | Tarek Ahmed
  • #متحف التقنيات
  • #سطور البرمجية
  • #موهوب تقنية
  • #ضع موقعك هنا

مشاركة مميزة

افضل موقع للربح من رفع الملفات Mega4Up 2021

المشاركات الشائعة

  • تحميل قالب سكويز النسخة المدفوعة مجانا حصريا من موقع الوليد نت
  • تحميل قالب فلامينغو - Flamingo
  • تحميل قالب ناز NazV2.1.1 المدفوع مجانا
  • اضافة هيدر يعرض معلومات المباريات لمدونات البث المباشر
  • تحميل قالب ماج برو - قالب بلوجر عصري للمجلات مجانا

تابعنا على فيسبوك

‏موقع الوليد نت‏

المتابعون

الإشتراك في القناة

الاقسام

  • اضافات بلوجر
  • اضافات ووردبريس
  • الربح من الانترنت
  • خدمات عامة
  • دروس بلوجر
  • سكربتات مجانية
  • قوالب بلوجر
  • قوالب بلوجر مدفوعة
  • قوالب ووردبريس مجانية
  • مسابقات
  • facebook
  • youtube
  • twitter
attachment
  • الصفحة الرئيسية
  • شروط الاستخدام
  • سياسة الخصوصية
  • تبادل اعلاني
  • facebook
  • youtube
  • twitter
  • pinterest

الحصول على إشعارات عبر البريد الإلكتروني

عن الموقع موقع الوليد نت

للربح من الانترنت وتطوير مدونات بلوجر وتحميل قوالب بلوجر وقوالب ووردبريس

صفحات مفيدة

  • الابلاغ عن الروابط المعطوبة
  • أداة ضغط أكواد CSS
  • أداة تحويل الاكواد
  • اداة تشفير اكواد

اقسام الموقع

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

  • facebook
  • youtube
  • twitter
موقع الوليد نت