تركيب سلايد شو إحترافي لمدونات بلوجر

Monday, August 15, 2016

تركيب سلايد شو إحترافي لمدونات بلوجر

0 تعليق

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

1 - إذهب الى تحرير قالب ثم ابحث عن </head> بالاستعانة بـ Ctrl+f ثم ضع الكود التالي فوقه:
<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/AVvXsEg_JG-PLonrcgQwDT_CTVZbDQaYEcxGUZyKTy0otH2BMfd7Eu8xjvMkI3NLc7U0hhnsbHUBjHIADzIXD8gqvT2fZmAmug6xV-GZ2f6wQ1BD-H7ysUTP25Kg-fhV436EVIr7brEfw38yG_q2/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/AVvXsEjur_Cu8DZjDRRoSSY5_sW3EMvNrC_64mtPcXmNC2Ag68s8Lm_UKq59PkUK6GbCCnqRvbAGk7jx3X1lsYp04IZgNjJSuMgs0zC9qHDxZO-P0Eija2lnuXIGGjh2_JqbPp_10TUn66hQJH_c/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/AVvXsEiwY2h3aZF8TglS5CudO4aKt5dbgyT8xxKCRnxnNlE5FRaqagfiz3OwrfBmxaAe_ERS4szyIZcZ8Ff0ykO7X4Jv9zelM6BH-F1VfGuRpD8U4WYfHVOznxQfA1m8eMyG65iah3YFOeodhht-/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/AVvXsEguQjOp5-LSsi7K55xzA8lDMYPt7nGo0CMeQCiZWim62uc7w8uqrjHWfgsNDTutItCypTJlPWf-nKDaqVsc2f77xuVabsgmUyJXYL5q7QiVRQe-sPGwSSTPV03a4l78fZ-vYcSSPd-WwnfL/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'/>

2- في هاته المرحلة نحتاج الى اضافة صندوق جديد في التخطيط لنضع به السلايد شو ، و اليك الدرس التالي ليساعدك في فتح علبة جديد في التخطيط ' إضافة صندوق 'Section' دخل تخطيط قوالب بلوجر'

3 - اتجه الى التخطيط ثم اضف بها اداة 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.amni8.com/',
        MaxPost: 6,
        RandompostActive: false,
        ImageSize: 620,
        NumCharacter: 150,
        idcontaint: "#skitterslideshow",
        cmtext: "تعليق",
        NoCmtext: "ليست هناك تعليقات",
        pBlank: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxoaH5gQahYRuIpvAjm_r4vnXNkUqtaukCqhE0w3TPkTr_-9fHg4FErA53R6qd4CgrJPzXvHu0itIQ7hbFDHsDd0KGXNRytrIX3OZg3XKxmvnfOM5pkDFf9UR6qyvWLiXeTNEXlPymwow/s1600/noimage.jpg",
        tagName: false
    });
});
//]]>
</script>
  </b:if>

 الاعدادات :


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



تدوينات ذات صلة
No comments

Post a Comment

مساحة إعلانية
مساحة إعلانية

يمكنك مشاركة الموضوع على الواتساب من هاتفك المحمول فقط

اكتب كلمة البحث واضغط إنتري