سلايد شو أحترافي على شكل Carousel لمدونتك

زوار ومتابعي المدونة 

السلام عليكم ورحمة الله وبركاته

أقدم لكم اليوم إضافة مهمة لإصحاب المدونات ومواقع  الكتب , او تحميل الكتب , الانمي , البرامج , الالعاب , مواقع تعليميه , حيث انه سلايد شو يقوم بعرض الصور على شكل مربعات متقطعه .

- طريقة التركيب :

1- إدخل إلى مدونتك | ثم أختر تخطيط | ثم إضافة أداة " HTML/JavaScript "

2- اللصق الكود التالي في صندوق الأداة :

 <style>
#homeblog7CarouselSlider {
  height:130px;
  background-color:#333333;
  border:10px solid #000000;
  position:relative;
  margin:50px 50px;
  overflow:auto;
}
/* CarouselSlider by www.homeblog7.blogspot.com  */
#homeblog7CarouselSlider:before,
#homeblog7CarouselSlider:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:-4px;
  width:4px;
  height:100%;
  box-shadow:0 0 4px black;
  z-index:10;
}
#homeblog7CarouselSlider:after {
  left:auto;
  right:-4px;
}
#homeblog7CarouselSlider .container {
  position:absolute;
  top:0;
  left:0;
  margin:5px 0 0 5px;
  width:300%;
  height:120px;
}
#homeblog7CarouselSlider figure {
  display:block;
  background-color:white;
  float:left;
  width:150px;
  height:120px;
  margin:0 5px 0 0;
  position:relative;
  overflow:hidden;
}
#homeblog7CarouselSlider figcaption {
  display:block;
  position:absolute;
  right:0;
  bottom:-50px;
  left:0;
  background-color:black;
  font:italic normal 11px Arial,Sans-Serif;
  color:white;
  padding:4px 10px;
  text-align:left;
  opacity:.8;
}
#homeblog7CarouselSlider figure img {
  display:block;
  border:none;
  margin:0 0;
}
</style>
<div id="homeblog7CarouselSlider">
    <div class="container">
        <figure>
            <a href="#" title="عنوان التسمية التوضيحية">
                <img alt="" src="http://im50.gulfup.com/8roqQo.jpg" />
            </a>
        </figure>
        <figure>
            <a href="#" title="عنوان التسمية التوضيحية">
                <img alt="" src="http://im50.gulfup.com/58ny9E.jpg" />
            </a>
        </figure>
        <figure>
            <a href="#" title="عنوان التسمية التوضيحية">
                <img alt="" src="http://im50.gulfup.com/wXStxz.jpg" />
            </a>
        </figure>
  <figure>
            <a href="#" title="عنوان التسمية التوضيحية">
                <img alt="" src="http://im50.gulfup.com/GkPRmI.jpg" />
            </a>
        </figure>
        <figure>
            <a href="#" title="عنوان التسمية التوضيحية">
                <img alt="" src="http://im50.gulfup.com/PXCl1v.jpg" />
            </a>
        </figure>
        <figure>
            <a href="#" title="عنوان التسمية التوضيحية">
                <img alt="" src="http://im50.gulfup.com/m39Md3.jpg" />
            </a>
        </figure>
  <figure>
            <a href="#" title="عنوان التسمية التوضيحية">
                <img alt="" src="http://im50.gulfup.com/t8EK6x.png" />
            </a>
        </figure>
        <figure>
            <a href="#" title="عنوان التسمية التوضيحية">
                <img alt="" src="http://im50.gulfup.com/IjpBxR.jpg" />
            </a>
        </figure>
        <figure>
            <a href="#" title="عنوان التسمية التوضيحية">
                <img alt="" src="http://im50.gulfup.com/2g5iJW.jpg" />
            </a>
        </figure>
    </div>
</div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
(function($) {
    var config = {
        itemMargins: 5 // Distance between the thumbnails
    };
    var $thumbnailScroller = $('#BloggerSpiceCarouselSlider'),
        $container = $thumbnailScroller.find('.container'),
        $item = $container.find('figure'),
        item_length = $item.length,
        item_width = $item.outerWidth(),
        item_margin = config.itemMargins,
        total_width = (item_width + item_margin) * item_length,
        $window = $(window);
    $thumbnailScroller.css('overflow', 'hidden');
    $container.css('width', total_width);
    // Auto caption builder & hover effect
    $item.each(function(cap) {
        if ($(this).children().attr('title')) {
            cap = $(this).children().attr('title');
            $(this).children().removeAttr('title');
            $(this).append('<figcaption>' + cap + '</figcaption>');
        }
    }).hover(function() {
        $(this).find('figcaption').stop().animate({
            bottom: 0
        }, 200);
    }, function() {
        $(this).find('figcaption').stop().animate({
            bottom: -50
        }, 200);
    });
    $window.on("resize", function() {
        var o_l = $thumbnailScroller.offset().left,
            t_w = $thumbnailScroller.width(),
            c_w = total_width;
        $thumbnailScroller.on("mousemove", function(e) {
            if ($(this).width() < $container.width()) {
                $container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));
            }
        });
    }).trigger("resize");
})(jQuery);
//]]>
</script>

- عدّل ما هو ملون .

- استخدم هذا الكود عند إضافة صورة جديدة :

<figure>
            <a href="#" title="عنوان التسمية التوضيحية">
                <img alt="" src="رابط الصورة" />
            </a>
        </figure>

تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .