سلايدر شو أفقي للمدونات التعليمية
مرحبا بكم مجددا معنا على مدونة عملاق النت في
قسم بلوجر حيث سنعمل على إضافة جد مهمة
لأصحاب المدونات التي تهتم بــ
الكتب,,مواقع
تعليميه........ , وهي إضافة سلايد شو يقوم بعرض
الصور على شكل مربعات, عند الضغط يتم جلب المجموعة التي تليها .
طريقة التركيب
- ادخل
مدونتك.
- القالب.
- حرر
القالب وابحث عن <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.
- الصق
هذا الكود
التغييرات
رابط الموضوع الذي عند الضغط
على الصورة سيتم الذهاب اليه .
رابط الصورة.
وصف الصورة , غير مهم.
عنوان الموضوع.
رابط الصورة.
وصف الصورة , غير مهم.
عنوان الموضوع.
No comments: