أسهل طريقة لاضافة السلايدشو أو عارض الشرائح

التسميات:


السلام عليكم ورحمة الله الكثير ممن يملكون مدونات يريدون تركيب ما يسمى بالسلايد شو او عارض الشرائح الا ان طريقة نركيبه المعقدة تحول دون ذلك وذلك لكثرة خطوات تثبيته واليوم وبانفراد تام اضع بين ايدكم اسهل طريقة لتركيبه والطريقة مضمونة 100/100  تابعوا معي الشرح
 يمكن ايضا معاينة الاضافة بمدونتي

طريقة التركيب بالمدونة؟


  1. اذهب الى لوحة التحكم = ثم التخطيط
  2. اضغط على اضافة اداة
  3.  HTML/JavaScript  اضغط على اداة 
  4. الصق الكود التالي في الاداة

<style type="text/css">

 /* JavaScript Image Slider By http://www.for-tek.blogspot.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJX8Lc0rr9RO3McqZPROrT32XDpcra1XRPG3hVUYJ5VUu3P_TnO6gk8Zd4d8z_RrQLZPCTnavvYWIxuP74P-yWb8x32lqAAAkdTFBm5W0HoAZVtIk-S00RBLmV-cbsHm1ou0Uoxg3EKE/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUsZN971yHIP9iL79gShxQm_AofLknF3JAo1SUhI4Mx2azxnHEB25i2-VYCj7-x0umn2r45O3-oz6P4cXA4m4RV499Yxi6dLrigbcrtrIhA1b4yD52Of2RasbJP7fXTIRVpltbhJPPgTo/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD5fjMlYlh15TYvZiSc7KzDW2SNeuF_81DNd_SgN8CP2LjurNRa7pWoAoOeurKlEofvxH10sEnb00nT-Ju96-gpHryRJLF_HFYx5WgPBuMWx-IcmVwSLGClhC7UITlye3EubwpJvXtt-w/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="for-tek.blogspot.com"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By for-tek.blogspot.com"/></a>

<a href="for-tek.blogspot.com"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="image slider by for-tek.blogspot.com"/></a>

<a href="for-tek.blogspot.com"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="Image Slider By for-tek.blogspot.com"/></a>

<a href="for-tek.blogspot.com"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Image Slider By for-tek.blogspot.com"/></a>

<a href="for-tek.blogspot.com"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="Image Slider By for-tek.blogspot.com"/></a>
                </div></div>

ملاحظة :يجب على الصور المستعملة في السلايدشو ان تكون بنفس الحجم
ويجب تركيب الاداة في اعلى المدونة تفاديا للمشاكل

التعديل على الكود - 

      - عرض السلايدشو

يجب على عرض السلايدشو ان يوازي عرض الصور

      - ارتفاع السلايدشو

يجب على ارتفاع السلايدشو ان يوازي ايضا ارتفاع الصور

      - رابط الصور

قم بتغيير روابط الصور الموجودة بالسلايدشو بصورك الخاصة

      - وصف الصورة

هنا يمكنك ادراج وصف للصورة

      - رابط الموضوع

هنا يمكنك وضع الرابط الذي سيتم الانتقال اليه عند الضغط على الصورة



ملاحظة: عندما تريد ان تضيف صورة اخرى ما عليك الا بتكرار هذا الكود وتغير ما به كما تقدم شرحه


تم قم بحفظ الاداة ومبروك ليكم الاضافة



روابط هذا المـــوضوع قــابلــة للنــــسخ
URL
HTML

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
fortek