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

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

اضافة اليوم عبارة عن سكربت يعرض اخر مواضيع المدونة حيث يتكون من 2 اماكن مكان لسلايدر و المكان الاخر على روابط للمواضيع

يمكنك معاينة الاضافة من هنا

شرح تركيب الاضافة

اولا إبحث في القالب على </head> وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isHomepage'>
<link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/>
<style type="text/css">
/*<![CDATA[*/
/*=====================================
= sections-posts
=====================================*/
.sections-posts{margin:15px auto}
.DivOne{width:calc(100% - 440px);height:380px;background:#fff;float:right;margin-left:10px;position:relative;direction:ltr;overflow:hidden}
.DivOne .owl-item>li{position:relative;height:380px}
.DivOne .owl-item>li img{height:auto;min-height:100%;width:100%}
.DivOne .owl-item>li .title{position:absolute;bottom:0;right:0;width:100%;color:#fff;z-index:10;direction:rtl;text-align:right;background:linear-gradient(transparent,#000);padding:280px 30px 30px 40px;font-size:20px;line-height:30px}
.DivOne .owl-item>li .description{position:absolute;bottom:40px;right:0;color:#ccc;z-index:100;direction:rtl;text-align:right;padding:30px;font-size:13px;line-height:22px}
.DivOne .owl-item>li span.ReadMore{position:absolute;bottom:25px;left:30px;background:#0c70dc;z-index:10;padding:4px 12px;border-radius:4px}
a.slider-next{position:absolute;top:50%;left:0;width:40px;height:45px;background:#ff7f00;color:#fff;z-index:100;margin-top:-20px;text-align:center;font-size:38px}
a.slider-prev{position:absolute;top:50%;right:0;width:40px;height:45px;background:#ff7f00;color:#fff;z-index:100;margin-top:-20px;text-align:center;font-size:38px}
.outer-left{float:left;width:430px}
.outer-left>a .title{float:right;padding:10px 15px 15px;color:#212121;height:90px;width:calc(100% - 120px);font-size:13px;line-height:23px}
.outer-left>a span{position:absolute;left:10px;top:21px;text-align:center;font-size:42px;color:#ff7f00}
.outer-left>a img{width:90px;float:right;height:100%}
.outer-left>a{display:block;height:93px;background:#fff;overflow:hidden;position:relative;margin-bottom:3px}
/*]]>*/
</style>
</b:if>

ثانيا إبحث على </body> وضع الكود التالي فوقه مباشرة
الكود موجود على هذه الصفحة من هنا

الان ضع الكود التالي في المكان الذي تريد ضهور فيه الاضافة

<div class='container sections-posts' data-num='10'></div>

يمكنك التعديل على عدد ضهور المواضيع عبر التغيير الرقم الذي ب الاحمر

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

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

مستر سيف - Mr seif
9 يونيو 2019 في 7:51 ص

اخيرا نزلت موضوع

رد حذف
- عبدو تكنولوجي
  9 يونيو 2019 في 1:09 م
  
  <3
  
  رد حذف
برمجة وتصميم
9 يونيو 2019 في 3:15 م

بعد غياب اخي عبدو اشتقت لك

رد حذف
- عبدو تكنولوجي
  9 يونيو 2019 في 5:13 م
  
  <3
  
  رد حذف
برمجة وتصميم
10 يونيو 2019 في 8:51 ص

اخي الكريم اريد ان تضع لي مواضيع ذات صلة على شكل سلايدر

رد حذف
- عبدو تكنولوجي
  10 يونيو 2019 في 3:39 م
  
  يوجد هذا نشرته من قبل
  https://www.abdoutech.com/2018/12/Related-Post-slider-Multistyle.html
  وسوف ننشر اضافة اخرا انشالله
  
  رد حذف
HalaTeck
10 يونيو 2019 في 4:59 م

شكرا لك على الاضافة الرائعة
تحياتي و تقديري

رد حذف
برمجة وتصميم
10 يونيو 2019 في 7:09 م

الاضافة غير متجاوبة

رد حذف
HalaTeck
23 يناير 2021 في 9:59 م

شكرا لك على السكربت
لو بالامكان تعديل رابط تحميل الكود اللذي يحتاج للتحميل لان صفحة التحميل لا تعمل

اللذي يوضع فوق /body و شكرا لك

رد حذف

Forms

عبدو تكنولوجي

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

قد تُعجبك هذه المشاركات

تعليقات