مرحبا بكم في موقع مبدع بلوجر !

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

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

سلايد شو 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

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

هناك 4 تعليقات:

  1. رائع جدا
    يشرفى زيارتكم لمدونتى (c)
    مدونة الموسوعة
    http://th3-encyclopedia.blogspot.com/2015/02/professional-sitemap_6.html

    ردحذف
  2. شكرا :)
    http://geek-pro-pc.blogspot.com/

    ردحذف
  3. عندما نتكلم جميعا عن النظافة نقول ان النظافة من اهم الاشياء فى الحياة وعندما نريد النظافة نبحث عن شركة مكافحة حشرات بالخبر
    لان مكافحة الحشرات من انواع النظافة المهمة وايضا
    شركة مكافحة حشرات بالجبيل ولس
    النظافة هى نظافة النفس واللبس فقط فهناك نظافات اخرى مثل تسربات المياة ونقول
    شركة كشف تسربات المياه بالدمامو شركة كشف تسربات المياة بالخبر ومن الاسباب الذى تؤدى لمكافحة
    الحشرات هى رش المبيدات ونبحث عن شركة رش مبيدات بالدمام
    وشركة رش مبيدات بالاحساء
    وايضا كافة النمل الابيض من اخطر انواع النمل وهى شركة مكافحة النمل الابيض بالدمام
    ويمكنكم الاتصال بنا على 0508400941

    ردحذف

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.