سلايدر متجاوب يعرض احدث المواضيع

سلايدر متجاوب يعرض احدث المواضيع

يوجد الآن مشاهدة التعليقات : 16

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

سلايدر احترافي متجاوب يعرض احدث المقالات ، مستعمل في العديد من القوالب المدفوعة منها قالب Mega-mag قالب FlatMag قالبBmag والعديد... سلايدر احترافي يلائم تقريبا جميع القوالب من حيث الشكل فيما يخص التركيب فهو سهل إما بوضعه بأداة مكانها فوق رسائل المدونة الإلكترونية أو بداخل القالب وكل هذا سيتم شرحه بعد المعاينة
شرح طريقة التركيب
1. مباشرة من التخطيط أضف أداة Html/JavaScript وضع الكود التالي بها
<style>
/* CSS Responsive Slider Recent Post www.Ar1web.com */
#featuredpost {margin: 10px 0;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){right:0;top:0}
#slides li:nth-child(2){right:50%;width:25%;height:50%}
#slides li:nth-child(3){right:75%;width:25%;height:50%}
#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:21px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:right;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:droid arabic kufi;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;right:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#0a7cd2;margin:0;text-align: center;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:droid arabic kufi;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgb(10, 124, 210);padding:3px 6px;font-family:tahoma;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}
  #slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="//cdn.rawgit.com/iHussam/ar1web/master/slider-rep.js">
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.ar1web.com",
MaxPost:10,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false

});
});
//]]>
</script>
* المحدد بالأزرق ضع بدله رابط موقعك
* MaxPost:10 : لزيادة عدد المواضيع

إذا اردت وضع السلايدر بداخل القالب تابع المراحل التالية
1. ابحث داخل القالب بإستعمال Ctrl+F عن </head>
2. ضع الكود المحدد باللون الأحمر فوقه
3. ابحث عن </body>
4. ضع الكود المحدد باللون الأخضر فوقه

* في هذه المرحة والأخيرة يوجد مكانين لوضع الكود بهما ويكون إما فوق المواضيع أو تحت القائمة وغيرها
5. ابحث عن content-wrapper أو عن main-wrapper
6. ضع الكود المحدد باللون البرتقالي تحت احد الأكواد
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 16 تعليقًا:

  1. ممكن المزيد من أدوات واضافات بلوجر :-d

    ردحذف
    الردود
    1. نعم توجد اضافات عديدة يلزم الوقت فقط ريثما انتهي من تجربتها ........... وتخصيص تدوينة لها ...

      حذف
  2. اخى ارجوك ان ترفع هذا الملف على مركز الخليج http://www.ar1web.com/2014/08/3d-psd.html

    ردحذف
    الردود
    1. ارجوك رد على

      حذف
    2. سيتم وضع رابط اخر في التدوينة ريتما ينتهي الرفع

      حذف
  3. ممكن كود شير مثل الموجود في الصورة

    http://im44.gulfup.com/d0qLkh.png

    ردحذف
    الردود
    1. ربما في تدوينة اخرى سأضعه

      حذف
  4. شكرا لك ولاكن ممكن شرح طريقة اضافة صندوق التدوينة !

    ردحذف
  5. سلايد جميل مثل طرح استاذ حسام ولكن الاضافة غير فعاله مع قالبي :(

    ردحذف
    الردود
    1. جرب وضعه بداخل القالب وليس بالتخطيط "والعكس"

      حذف
    2. كما قال الأخ عمر الإضافة ليست شغالة

      حذف
  6. إضافة مميزة ,, لكن لما وصعتها على مدونتي الانجليزية اصبح التاريخ يظهر بالعربية كيف اغير ذلك ؟؟

    ردحذف
  7. يا اخي السلايدر يظهر اليضا في المواضيع في الاعلي وانا اريده في الصفحة الرئيسية فقط

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم