عرب بلوس | Arab Plus

عرب بلوس | Arab Plus, منصة عربية مستقلة, نعمل فى المجال التقنى وتقديم الدروس والشروحات والمقالات التقنية وغيرها للشاب العربى, بإمكانك معنا الأستفادة مهما كان مجالك, نهدف للنهوض بالشاب العربى لأرقى مستوى فى المجال التقنى والرقمى. التأسيس: 2015/1/1. المالك والمنشئ: يوسف فيلالي.

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

  • تسميات
    • تسميات اغلاق التسميات
    • » 4

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



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

     السلام عليكم ورحمة الله تعالى وبركاته.
      نقدم لكم اضافة رائعة عبارة عن سلايد شو احترافي للمدونات بلوجر. المهم لن اطيل عليكم اترككم مع الموضوع الجديد.
    المقدم من طرف مدونة احترف التدوين
    سلايد شو carousel

    السلايد شو مناسب لجميع أنواع المدونات خصوصا المدونات التي تعرض الكتب أو الأفلام
    و حتى البرامج و الألعاب.
    يمكنك معاينة الاضافة من هنا
    الآن نأتي لطريقة التركيب
    1. ادخل للمدونة > قالب > تحرير HTML> ثم ابحث عن وسم <head > والصق هذا الكود أسفله
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' rel='stylesheet'/>

    ابحث عن الوسم   ]]></b:skin> ثم الصق هذا الكود فوقه 

    #caja-carrusel{width:920px;height:155px;overflow:hidden;margin:20px auto;padding:0;position:relative;top:0;z-index:5;}.infiniteCarousel{width:900px;position:relative;height:170px;margin:0 0 0 10px;}.infiniteCarousel .wrapper{width:845px;overflow:auto;height:170px;margin:0 25px 0 25px;position:absolute;top:0;}.infiniteCarousel ul a img{border:1px solid #CCC;padding:0;-webkit-box-shadow:1px 1px 8px #777;-moz-box-shadow:1px 1px 8px #777;box-shadow:1px 1px 8px #777;width:100px;height:140px;}.infiniteCarousel .wrapper ul{width:9999px;list-style:none;margin:0;padding:0;position:absolute;top:0;}.infiniteCarousel ul li{display:block;float:left;padding:9px;height:142px;width:102px;}.infiniteCarousel ul li a img{display:block;color:#000;}.infiniteCarousel .icon-angle-right{right:0;font-size:60px;top:40px;position:absolute;cursor:pointer;}.infiniteCarousel .icon-angle-left{left:0;font-size:60px;top:40px;position:absolute;cursor:pointer;}

    ابحث عن الوسم <body/> ثم الصق هذا الكود فوقه 

    <script type='text/javascript'> $.fn.infiniteCarousel = function () { function repeat(str, num) { return new Array( num + 1 ).join( str ); }  return this.each(function () { var $wrapper = $('&gt; div', this).css('overflow', 'hidden'), $slider = $wrapper.find('&gt; ul'), $items = $slider.find('&gt; li'), $single = $items.filter(':first'),  singleWidth = $single.outerWidth(),  visible = Math.ceil($wrapper.innerWidth() / singleWidth), currentPage = 1, pages = Math.ceil($items.length / visible);   if (($items.length % visible) != 0) { $slider.append(repeat('&lt;li class=&quot;empty&quot; /&gt;', visible - ($items.length % visible))); $items = $slider.find('&gt; li'); }  $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); $items = $slider.find('&gt; li');   $wrapper.scrollLeft(singleWidth * visible);  function gotoPage(page) { var dir = page &lt; currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n;  $wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 500, function () { if (page == 0) { $wrapper.scrollLeft(singleWidth * visible * pages); page = pages; } else if (page &gt; pages) { $wrapper.scrollLeft(singleWidth * visible); page = 1; }  currentPage = page; });  return false; }  $wrapper.after('&lt;a class=&quot;icon-angle-left&quot;&gt;&lt;/a&gt;&lt;a class=&quot;icon-angle-right&quot;&gt;&lt;/a&gt;');  $('a.icon-angle-left', this).click(function () { return gotoPage(currentPage - 1);  });  $('a.icon-angle-right', this).click(function () { return gotoPage(currentPage + 1); });  $(this).bind('goto', function (event, page) { gotoPage(page); }); });  }; $(document).ready(function () { $('.infiniteCarousel').infiniteCarousel(); }); </script>

    و الآن اذهب إلى تخطيط ثم إضافة أداة و اختر مكان مناسب تحت الهيدر مثلا ثم اختر اضافة أداةHTML/JAVASCRIPT
    ثم الصق هذا الكود مع بعض التعديلات 
    <div id='caja-carrusel'>
    <div class='infiniteCarousel'>
    <div class='wrapper' style='overflow-x: hidden; overflow-y: hidden; '>
    <ul>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/0.jpg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/1.Jpeg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/2.jpeg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/3.jpg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/4.Jpeg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/5.jpg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/6.jpg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/7.jpg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/8.jpg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/9.jpg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/10.png' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/11.Jpeg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/12.jpg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/5.jpg' title='عنوان الموضوع'/></a></li>
      <li><a href='رابط الموضوع'><img alt='وصف الصورة' src='https://jetara.googlecode.com/svn/trunk/imgs-slide/7.jpg' title='عنوان الموضوع'/></a></li>

          </ul></div> </div></div>

    التعديلات
          : رابط الموضوع الذي عند الضغط على الصورة سيتم الذهاب اليه .
          : رابط الصورة.
          : وصف الصورة , غير مهم.
          : عنوان الموضوع.

    و الآن هذه نتيجة التعديلات 

    سلايد شو carousel

    وبهذا قد اكون وفقت لكم في هذا الموضوع

    2 التعليقات

    شاركنا رأيكـــ التعليقاتالتعليقات
    Unknown
    ADMIN
    18 يناير 2015 في 3:41 ص

    اخى تم وضع بندرك فى مدونتى عبدالرحمن للمعلوميات ان اسف على التاخير لانى كنت فى الامتحنات الثانويه اسف اخى وتم وضع بندرك
    رابط المدونه الخاصه بى tech-abd.blogspot.com

    رد
    avatar
    Yussef
    ADMIN
    18 يناير 2015 في 7:35 ص

    شكرا لك اخي اتمنى لك النجاح |o|

    رد
    avatar
    إرسال تعليق
    شكرا لتعليقك

    أحدات المواضيع

    التسميات

    جميع الحقوق محفوظة 2015-2016
    يوسف فيلالي
    عرب بلوس