سلايد شو تلقائي الإصدار 3

نواصل مع إصدار آخر من قسم السلايدرات نشارككم هذا السلايدر المتجاوب مع جميع الشاشات بطلباتكم المتعددة عليه لما له من جمالية واحترافية في عرض المشاركات، يتوفر سلايدر Skitter على العديد من التأثيرات في اظهار الصور يحتوي ايضا على تاريخ نشر الموضوع وعدد التعليقات يليه الوصف ويمكن عرض المواضيع اما عبر تسمية محددة أو المواضيع الحديثة كما سنتابع في الشرح

معاينة

شرح طريقة التركيب

1. ابحث عن </head> ثم ضع الكود التالي فوقه

<style>
/* Skitter Slideshow Ar1web */
#skitterslideshow{margin: 10px 0;padding: 4px; border: 1px solid #DDD; box-shadow: 0 1px 5px rgba(0,0,0,.15);font-family: 'Droid Arabic Naskh',sans-serif;}
#slider-wrapper-ar1web{padding:0;background-color:#FDFDFD;box-shadow:0 1px 5px rgba(0,0,0,.15);border-radius:3px;height:250px;position:relative;z-index:8888}
.box_skitter_home.ar1web-theme .prev_button,.box_skitter_home.ar1web-theme .next_button,.box_skitter_home.ar1web-theme .info_slide_dots{background-color:#fbfbfb;transition:background-color linear .3s}
.box_skitter ul{display:none}
.box_skitter .container_skitter{overflow:hidden;position:relative;width:100%;height:100%}
.box_skitter .image{overflow:hidden;max-width:100%;max-height:100%}
.box_skitter .image img{display:none;width:100%;height:100%}
.box_skitter .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.box_skitter img{max-width:none}
.box_skitter .box_clone img{position:absolute;top:0;width:620px;height:310px;max-width:630px;left:0;z-index:19}
.box_skitter .prev_button{position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px}
.box_skitter .next_button{position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px}
.box_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:padding:5px 0 5px 5px;border-radius:5px;opacity:0.75}
.box_skitter .info_slide .image_number{background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;border-radius:2px}
.box_skitter .info_slide .image_number_select{background:#c00;float:left;padding:2px 10px;margin:0 5px 0 0}
.box_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}
.box_skitter .info_slide_thumb{border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0}
.box_skitter .info_slide_thumb .image_number{overflow:hidden;width:70px;height:40px;position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute;top:-50px;left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:#ccc;width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;border-radius:20px;cursor:pointer;border:1px solid #333}
.box_skitter .info_slide_dots{position:absolute;bottom:-40px;z-index:151;padding:5px 0 5px 5px;border-radius:50px}
.box_skitter .info_slide_dots .image_number{background:#333;float:left;margin:0 5px 0 0;cursor:pointer;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden}
.box_skitter .info_slide_dots .image_number_select{background:#c00;float:left;margin:0 5px 0 0}
.box_skitter .label_skitter{z-index:80;position:absolute;bottom:0;left:0;display:none}
.loading{position:absolute;top:50%;right:50%;z-index:10000;margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:#FFF no-repeat left top;width:32px;height:32px}
.label_skitter{z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.9;background:#000}
.label_skitter p{padding:5px;margin:0}
.box_skitter .progressbar{background:#000;position:absolute;bottom:5px;left:10px;height:5px;width:940px;z-index:99;border-radius:20px}
.preview_slide{display:none;position:absolute;z-index:999;bottom:40px;left:-40px;width:100px;height:50px;border:3px solid #FFF;background:rgba(0,0,0,.5);box-shadow:rgba(0,0,0,0.7) 0 0 10px;overflow:hidden}
.preview_slide ul{width:100px;height:50px;padding:0;overflow:hidden;margin:0;list-style:none;display:block;position:absolute;top:0;left:0}
.preview_slide ul li{width:100px;height:55px;overflow:hidden;float:left;margin:0;padding:0;position:relative;display:block}
.preview_slide ul li img{position:absolute;top:0;left:0;height:55px;width:100px}
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}
.box_skitter_home{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiutjlZy1OO6bWX5o76wOPBUIEfYDYYqhKauctukgWieI_Lx-sZGQruI_wvV52rCDFJ8wPez3f1dxsVHDQYqLp1iXj1DYoAt2CZwanyJpboPMtV9VWJD_AwVJCxnW6-frC2OzPUbJkonoac/s1600/skitterloading.gif);background-position:center center;background-repeat:no-repeat}
.box_skitter_home.ar1web-theme .prev_button,.box_skitter_home.ar1web-theme .next_button,.box_skitter_home.ar1web-theme .info_slide_dots{border:1px solid #FFF;box-shadow:0 1px 3px rgba(0,0,0,0.3);border-radius:0}
.box_skitter_home.ar1web-theme .info_slide{}
.box_skitter_home.ar1web-theme .info_slide_dots{bottom: -16px; width: 130px; left: 50%!important; margin-left: -77px;height:30px;padding:0 8px;z-index:99;right: inherit!important;}
.box_skitter_home.ar1web-theme .info_slide_dots span{transition:background linear .3s;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZkpkBnZHnvQP6QzQhzOZTYfimCDus4rvnXj8fOMbi_SONngZJUuj929uDyxgtdfYEWi6krP1-WSjaXGJ4fQ_pQiCKQtREvG3kPgS-fUK5JRx8LZTWz3NULBZTgTK5gFVx3YDdyCNF2dKn/s1600/light-overlay.png);background-repeat:repeat-x;background-position:left -13px;background-color:#d1d1d1;color:#777;border-radius:50%;border-bottom:1px solid #FFF;display:block;width:10px;height:10px;text-indent:-9999px;float:left;margin:10px 6px 0 6px}
.box_skitter_home.ar1web-theme .info_slide_dots span:hover{background-color:#666}
.box_skitter_home.ar1web-theme .info_slide_dots span.image_number_select{background-color:#2AA9E0;border:none;width:14px;height:14px;margin:8px 3px 0 3px;box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1)}
.box_skitter_home.ar1web-theme .prev_button,.box_skitter_home.ar1web-theme .next_button{display:block;width:75px;height:22px;line-height:30px;text-decoration:none;font-size:10px;text-transform:uppercase;transition:none;text-indent:0;bottom:-12px;top:auto;color:#777;z-index:98;cursor:pointer}
.box_skitter_home.ar1web-theme .prev_button:hover,.box_skitter_home.ar1web-theme .next_button:hover,.box_skitter_home.ar1web-theme .prev_button:active,.box_skitter_home.ar1web-theme .next_button:active{opacity:1!important}
.box_skitter_home.ar1web-theme .next_button{right:27%;padding-right:5px;text-align:right;line-height:22px;opacity:1!important}
.box_skitter_home.ar1web-theme .next_button span{padding-right:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh34VW6PCl7Vzr6dXTDL7KPjCbE_dgMef0HAjpUioiAIZxA3zPFLvGWeBU_dKiU60_m5v42YUTu947QEg1Ak_CkB-5EjzQQVlUF1tDuBZ7Tl12SEQM4dlM4g6LP3-UTCXrjapn6k6YpXeOd/s1600/nav-next.png) no-repeat left top;background-position:right center;padding-bottom:1px;display:block}
.box_skitter_home.ar1web-theme .prev_button{left:27%;padding-left:5px;text-align:left;line-height:22px;opacity:1!important}
.box_skitter_home.ar1web-theme .prev_button span{padding-left:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRCJ3TWiQnBqP2A7hHHBaBEXm0XvHWOHQeHAsCuU-DEZkOZ5KBuVpifkeYmnJh8Ub6B6_B_lWMQO86xudguAt0DF1nd-HtE3yxSQf68kzOI9J4WQPbvSvNx1g7QbrFoBtBPAods1p5BvR/s1600/nav-prev.png) no-repeat left top;background-position:left center;padding-bottom:1px;display:block}
.box_skitter_home.ar1web-theme .label_skitter{background:#117BC3;width:90%;padding:5px 8px 5px;left:50%;margin-left:-45%;bottom:10%;text-align:right;height:auto;border-right:2px solid #fff;border-left:2px solid #fff;color:#fff;font-size:12px;    direction: rtl;}
.box_skitter_home.ar1web-theme .label_skitter p{padding:0;margin:0;text-shadow:0 1px 0 rgba(0,0,0,0.3)}
.box_skitter_home.ar1web-theme .label_skitter h4{margin:0;font-size:135%;text-shadow:0 1px 0 rgba(0,0,0,.3);color:white;padding:0 0 10px}
.box_skitter_home.ar1web-theme .label_skitter a{color:#fff;text-decoration:none}
.box_skitter_home.ar1web-theme .label_skitter a:hover{color:#eee}
.box_skitter_home.ar1web-theme .info_slide_thumb{background-color:#fff}
.box_skitter.ar1web-theme .info_slide_thumb .image_number{margin:5px}
.box_skitter .container_skitter .date,.box_skitter .container_skitter .cm{font-size:100%}
.box_skitter .container_skitter .date span{margin-right:3px}
@media only screen and (max-width:960px){.box_skitter_home.ar1web-theme .next_button{right:20.5%}.box_skitter_home.ar1web-theme .prev_button{left:20.5%}}
@media only screen and (max-width:768px){#slider-wrapper-ar1web{height:220px}.box_skitter .box_clone img{width:422px;height:220px}.box_skitter_home.ar1web-theme .next_button{right:19.5%}.box_skitter_home.ar1web-theme .prev_button{left:19.5%}}
@media only screen and (max-width:640px){.box_skitter_home.ar1web-theme .next_button{right:26.5%}.box_skitter_home.ar1web-theme .prev_button{left:26.5%}}
@media only screen and (max-width:480px){#slider-wrapper-ar1web{height:200px}.box_skitter .box_clone img{width:280px;height:220px}.box_skitter_home.ar1web-theme .next_button{right:20.5%}.box_skitter_home.ar1web-theme .prev_button{left:20.5%}}
@media screen and (max-width:320px){.box_skitter_home.ar1web-theme .label_skitter p{display:none}.box_skitter_home.ar1web-theme .next_button{right:5.5%}.box_skitter_home.ar1web-theme .prev_button{left:5.5%}}
</style>
<script src='https://cdn.rawgit.com/iHussam/ar1web/master/skitterslider.js' type='text/javascript'/>

* في هذه الخطوة سنعمل على اضافة الكود في التخطيط بأداة Html/Javascript لفعل ذلك نحتاج لإضافة مكان الأداة فوق رسائل المدونة الإلكترونية لكي يظهر السلايدر فوق المواضيع ويكون متناسق لذا إن كنت تتوفر فعلا على أداة فوق رسائل المدونة الإلكترونية فيمكن الإنتقال مباشرة للخطوة 4 وانسخ الكود
2. في قائمة ادوات القالب اضغط على الإنتقال الى الأداة : Blog1
3. ضع قبله بكود الكود الآتي كما موضح بالصورة

<b:section class='sliderskitter' id='slideshow-ar1web' maxwidgets='1' name='سلايدر'></b:section>

4. اتجه الى التخطيط وسترى اداة جديدة بإسم سلايدر اضف بها اداة Html/Javascript ثم ضع بها الكود التالي

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div id='skitterslideshow'></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    pengaturan({
        blogURL: 'http://www.ar1web.com/',
        MaxPost: 6,
        RandompostActive: false,
        ImageSize: 620,
        NumCharacter: 150,
        idcontaint: "#skitterslideshow",
        cmtext: "تعليق",
        NoCmtext: "ليست هناك تعليقات",
        pBlank: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDqkkZJocpYQAbioao9idzSkiEHPyVDCgnh6HSMtFoF1q2-WsXOM2OBd8oNiQC5BK2ITyP1ySWQe6Butfw1Hljs1a0Dk4Hdfb1sJh7lZcVVWkquzTaB8WbhyiFbRY5tljGjVq4lAz6QeE/s1600/noimage.jpg",
        tagName: false
    });
});
//]]>
</script>
  </b:if>

التعديلات
1. غير www.ar1web.com برابط موقعك
2. RandompostActive: false خاصة بتفعيل جلب مواضيع عشوائية لتفعيلها غير false بـ true
3. tagName: false لتفعيل اختيار تسمية لقسم معين لفعل ذلك غير false بهذا "هنا التسمية"

سلايد شو تلقائي الإصدار 3

معلومات عن التدوينة

احدث التعليقات

الاكثر زيارة

الصفحات

متابعينا الاوفياء