سلايد شو تلقائي الإصدار الأول - عالم المدون

الخميس، 7 أبريل، 2016

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


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



تركيب السلايد شو 

أولا وقبل عمل اى شئ فم بأخذ نسخة احتياطية من قالب مدونتك

1- قم بالبحث عن الوسم  ]]></b:skin> وضع فوقه الكواد التالى ( قبله )


#skitterslideshow{margin: 14px 0;padding: 0px;  height: 300px;margin-bottom: -12px;}
#slider-wrapper-ar1web{padding:0;background-color:#FDFDFD;box-shadow:0 1px 5px rgba(0,0,0,.15);border-radius:3px;height:300px;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{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:1090px;height:310px;max-width:1090px;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-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-radius:0}
.box_skitter_home.ar1web-theme .info_slide{}
.box_skitter_home.ar1web-theme .info_slide_dots{bottom: -16px; width: 130px; left: 7%!important; margin-left: -77px;height:30px;padding:0 8px;z-index:99;right: inherit!important;top: 5px;}
.box_skitter_home.ar1web-theme .info_slide_dots span{transition:background linear .3s;background-image:url(http://3.bp.blogspot.com/-4YmYwCb-ysQ/UZoFIi-u66I/AAAAAAAAAcI/oGf5a50M4Mk/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:0px;height:0px;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: 0px;padding-right: 5px;text-align: right;line-height: 22px;opacity: 1!important;top: 135px;}
.box_skitter_home.ar1web-theme .prev_button{left:0px;padding-left:5px;text-align:left;line-height:22px;opacity:1!important;top: 135px;}
.box_skitter_home.ar1web-theme .label_skitter{
width: 99%;padding: 5px 8px 5px;left: 51%;margin-left: -45%;bottom: 10%;height: auto;color: #fff;font-size: 12px;direction: rtl;background: #262262;text-align: center;}
.box_skitter_home.ar1web-theme .label_skitter p{padding:0;margin:0;text-shadow:0 1px 0 rgba(0,0,0,0.3);display: none;}
.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:#e5192c}
.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%}}
.info {display: none;}

2- قم سوف تقوم بوضع الكواد الخاص بأظهار السلايد شو فى اداة 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://wdbloog.blogspot.com/',
        MaxPost: 6,
        RandompostActive: false,
        ImageSize: 620,
        NumCharacter: 150,
        idcontaint: "#skitterslideshow",
        tagName: false
    });
});
//]]>
</script>
  </b:if>

سوف تقوم بتغيير رابط مدونة عالم المدون https://wdbloog.blogspot.com برابط مدنتك ولا تقوم بتعديل اى شئ اخر .

3- أن كنت لا تتوفر على اداة فوق  رسائل المدونة الإلكترونية قوم بوضع الكواد التالى فوقه لتضيغ اداة جديده فى مدونتك .

<b:section class='sliderskitter' id='slideshow-wdbloog' maxwidgets='1' name='wdbloog'></b:section>

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

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

4 تعليق على موضوع : سلايد شو تلقائي الإصدار الأول

اضافة امتر من رائعة تابع اخي

شكرا لك اخى على دعمك بالتوفيق لك

قم بتجرب السلايد شو على مدونة تجربية اخى

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر