سلايدر شو أفقي للمدونات التعليمية
الســــلام عليكم ورحمة الله وبركاته
مرحبا بكم مجددا معنا على مدونة عملاق النت في
قسم بلوجر حيث سنعمل على إضافة جد مهمة
لأصحاب المدونات التي تهتم بــ
الكتب,,مواقع
تعليميه........ , وهي إضافة سلايد شو يقوم بعرض
الصور على شكل مربعات, عند الضغط يتم جلب المجموعة التي تليها .
طريقة التركيب
- ادخل
مدونتك.
- القالب.
- حرر
القالب وابحث عن <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 = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul'), $items = $slider.find('> 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('<li class="empty" />', visible - ($items.length % visible))); $items = $slider.find('> 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('> li'); $wrapper.scrollLeft(singleWidth * visible); function gotoPage(page) { var dir = page < 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 > pages) { $wrapper.scrollLeft(singleWidth * visible); page = 1; } currentPage = page; }); return false; } $wrapper.after('<a class="icon-angle-left"></a><a class="icon-angle-right"></a>'); $('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.
- الصق
هذا الكود
التغييرات
رابط الموضوع الذي عند الضغط
على الصورة سيتم الذهاب اليه .
رابط الصورة.
وصف الصورة , غير مهم.
عنوان الموضوع.
رابط الصورة.
وصف الصورة , غير مهم.
عنوان الموضوع.
ليست هناك تعليقات: