تركيب سلايدر تلقائي بالسيدبار

تركيب سلايدر تلقائي بالسيدبار

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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

سأوفر لكم في هذه التدوينة شرح لإضافة سلايدر لا يختلف عن سابقاته، والذي سيتمحور حول تركيب سلايدر مخصص للسيدبار، إنه سلايدر ذات منفعة جيدة بحيث سيأتي لك بأحدث المواضيع المطروحة وسيعرضها تلقائيا تتضمن العنوان وتاريخ النشر والكاتب مع تأثير جميل كما يمكن تخصيصه لعرض مواضيع ذات تسمية محددة وكل هذا سنتعرف عليه بعد التركيب لذا أترككم مع المعاينة أولا
شرح طريقة التركيب
1. مباشرة من التخطيط أضف أداة Html/Javascript بالسيدبار ثم ضع بها الكود التالي

<style scoped="" type="text/css">
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{text-align: right; direction: rtl; font-family: droid arabic kufi;position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;right:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s;font-family: droid arabic kufi;}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","أبريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
  blogURL: "http://www.ar1web.com",
  MaxPost: 8,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>
تخصيص السلايدر
blogURL: "http://www.ar1web.com", : ضع رابط موقعك
MaxPost: 8, : عدد المشاركات الظاهرة
autoplay: true, : لتعطيل خاصية التغيير التلقائي بالمشاركات ضع بدل false - true
tagName: false : لإظهار تسمية محددة ضع بدل false التسمية مثلا : "قوالب"
ملحوظة:

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

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

  1. عندى مشكله التدوينات لا تظهر فى السلايد ارجو الحل

    ردحذف
    الردود
    1. هل وضعت رابط موقعك بدل رابطنا؟

      حذف
  2. هل مناك امكانية لعرض قسم واحد فقط

    ردحذف
    الردود
    1. تم شرحه في التخصيص وضع تسمية

      حذف
  3. شكراَ حبيبي ^_^ حلو

    ردحذف
  4. شكرا لك اخى تمت الافضاافة على المدونة بنجاح سلايدر أكثر من رائع
    بعد انك اخر لقد وضعت تعليق فى قسم http://www.ar1web.com/2015/03/do-you-have-problem-in-blogger.html?commentPage=2
    اتمنا الاجابة عليه وشكرا

    ردحذف
    الردود
    1. لا أعرف طريقة الربط بالموقع الذي ذكرته

      حذف
  5. شكرا لك اخى

    ردحذف
  6. شكرا لك أخي على الإضافة الرائعة بارك الله فيكم

    ردحذف
    الردود
    1. على الرحب والسعة أخي الكريم

      حذف
  7. شكرا لك اخي يعمل بشكل جيد هدا رابط مدونتي

    ردحذف
  8. اخي لم يعمل معي

    ردحذف
    الردود
    1. هل غيرت رابط مدونتنا برابطك؟

      حذف
  9. غير معرف12/19/2015

    عندى مشكله التدوينات لا تظهر فى السلايد ارجو الحل

    ردحذف
  10. شكرا لك على الاضافة الاكثر من رائعة ,, اخي هل بالامكان اضافتها للصفحة الرئيسية فقط ؟ ,, مشكور مرة أخرى

    ردحذف
    الردود
    1. العفو، قم باضافة هذا الكود فوق <style> :
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      ثم هذا في نهايته (بعده) : </b:if>

      حذف
  11. غير معرف2/23/2016

    رائع جدا أخي تشكر على الإضافة نايس

    ردحذف
  12. غير معرف3/19/2016

    افضل واجمل موضع عاشت ايدك اخى

    ردحذف
  13. عندي استفسار ، كيف يمكنني تغيير خط السلايد شو الى انجليزي لانني حاولت و لكن لم استطع ذلك اتمنى ان تفيدني

    ردحذف

عن الكاتب :

إرشادات

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

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

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

    كلمة الختام

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