24‏/10‏/2015

سلايدر شو يعرض صورا بأناقة وبجودة عالية ما يميزه أنه يتناسب تلقائيا مع أي حجم والمكان الأفضل له هو بالسيدبار ويمكن استعماله بداخل المواضيع أيضا يصلح لكافة المجالات وبسهولة يمكنك نسخ صورة موضوعك ووضعها به مع رابط الموضوع لن تحتاج لتعديل مقاسها وبهذا وبدون تأخير سأدعكم مع المعاينة
شرح طريقة التركيب
1. إبحث عن </body> وضع الكود التالي فوقه
<script src='//googledrive.com/host/0B0LkZloPKBfWRXVIS0x6RFlQQjg'/>
<script type='text/javascript'>
    jQuery( document ).ready(function( $ ) {
        $( &#39;#my-slider&#39; ).sliderPro();
    });
</script>
2. بعدها إبحث عن </head> وضع الكود التالي فوقه
<link href='//googledrive.com/host/0B0LkZloPKBfWNHQ2TDVGYkpZRFU' rel='stylesheet'/>
3. إذهب إلى التخطيط وأضف أداة Html/Javascript بالمكان الذي يناسبك وضع بها الكود الآتي
<div class="slider-pro" id="my-slider">
    <div class="sp-slides">
        <!-- Slide 1 -->
        <div class="sp-slide">
            <a href="#" target="_blank"><img class="sp-image" src="http://3.bp.blogspot.com/-7VgyBrRkJ3E/VfgUc-QjMMI/AAAAAAAAI38/GIgR1JewiJY/s1600/Pro1.png"/></a>
                       
        </div>

  <!-- Slide 2 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://3.bp.blogspot.com/-h0KxM6-112I/Vd4qB8DabXI/AAAAAAAALJw/qjE4HfTk_BU/s1600/Tag%2Band%2BStyling%2BVienna%2BLite%2B2.jpg"/></a>
                      
            
        </div>

        <!-- Slide 3 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://4.bp.blogspot.com/-FJm4YwkDRmk/U82_7bos97I/AAAAAAAAEoQ/qXsRwHK9oiA/s1600/2014_rio_2_movie-1280x800.jpg"/></a>
           
            
        </div>

<!-- Slide 4 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://2.bp.blogspot.com/-LIVivboMUw4/VebWlcwjWkI/AAAAAAAAIo4/jVLxjPxhehw/s1600/nickwordc.jpg"/></a>
           
            
        </div>

<!-- Slide 5 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://1.bp.blogspot.com/-T-2rWKFugBk/VL0Abkjb7rI/AAAAAAAAHFA/5sLSInli3WI/s1600/work_03.png"/></a>
            
            
        </div>

<!-- Slide 6 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://1.bp.blogspot.com/-9TnEjf3WVUI/VR2wajmlDRI/AAAAAAAAHbQ/S_GCiA7-R8Y/s1600/6.jpg"/></a>
            
            
        </div>
    </div>
</div>
التخصيص
* كل الصور محددة باللون الأخضر تغير بخاصتك
* الهاشتاج # ضع بدله رابط الموضوع
* يمكنك إضافة صورة سابعة عبر إضافة الكود التالي أسفل </div> المحدد بالبرتقالي
<!-- Slide 7 -->
        <div class="sp-slide">
 <a href="رابط الموضوع" target="_blank"> <img class="sp-image" src="رابط الصورة"/></a>
            
            
        </div>
وهكذا يمكنك إضافة صورة 8 و 9... عبر تكرار الكود بعد </div> الكود السابق
سلايدر شو يعرض صورا بأناقة وبجودة عالية ما يميزه أنه يتناسب تلقائيا مع أي حجم والمكان الأفضل له هو بالسيدبار ويمكن استعماله بداخل المواضيع أيضا يصلح لكافة المجالات وبسهولة يمكنك نسخ صورة موضوعك ووضعها به مع رابط الموضوع لن تحتاج لتعديل مقاسها وبهذا وبدون تأخير سأدعكم مع المعاينة
شرح طريقة التركيب
1. إبحث عن </body> وضع الكود التالي فوقه
<script src='//googledrive.com/host/0B0LkZloPKBfWRXVIS0x6RFlQQjg'/>
<script type='text/javascript'>
    jQuery( document ).ready(function( $ ) {
        $( &#39;#my-slider&#39; ).sliderPro();
    });
</script>
2. بعدها إبحث عن </head> وضع الكود التالي فوقه
<link href='//googledrive.com/host/0B0LkZloPKBfWNHQ2TDVGYkpZRFU' rel='stylesheet'/>
3. إذهب إلى التخطيط وأضف أداة Html/Javascript بالمكان الذي يناسبك وضع بها الكود الآتي
<div class="slider-pro" id="my-slider">
    <div class="sp-slides">
        <!-- Slide 1 -->
        <div class="sp-slide">
            <a href="#" target="_blank"><img class="sp-image" src="http://3.bp.blogspot.com/-7VgyBrRkJ3E/VfgUc-QjMMI/AAAAAAAAI38/GIgR1JewiJY/s1600/Pro1.png"/></a>
                       
        </div>

  <!-- Slide 2 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://3.bp.blogspot.com/-h0KxM6-112I/Vd4qB8DabXI/AAAAAAAALJw/qjE4HfTk_BU/s1600/Tag%2Band%2BStyling%2BVienna%2BLite%2B2.jpg"/></a>
                      
            
        </div>

        <!-- Slide 3 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://4.bp.blogspot.com/-FJm4YwkDRmk/U82_7bos97I/AAAAAAAAEoQ/qXsRwHK9oiA/s1600/2014_rio_2_movie-1280x800.jpg"/></a>
           
            
        </div>

<!-- Slide 4 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://2.bp.blogspot.com/-LIVivboMUw4/VebWlcwjWkI/AAAAAAAAIo4/jVLxjPxhehw/s1600/nickwordc.jpg"/></a>
           
            
        </div>

<!-- Slide 5 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://1.bp.blogspot.com/-T-2rWKFugBk/VL0Abkjb7rI/AAAAAAAAHFA/5sLSInli3WI/s1600/work_03.png"/></a>
            
            
        </div>

<!-- Slide 6 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="http://1.bp.blogspot.com/-9TnEjf3WVUI/VR2wajmlDRI/AAAAAAAAHbQ/S_GCiA7-R8Y/s1600/6.jpg"/></a>
            
            
        </div>
    </div>
</div>
التخصيص
* كل الصور محددة باللون الأخضر تغير بخاصتك
* الهاشتاج # ضع بدله رابط الموضوع
* يمكنك إضافة صورة سابعة عبر إضافة الكود التالي أسفل </div> المحدد بالبرتقالي
<!-- Slide 7 -->
        <div class="sp-slide">
 <a href="رابط الموضوع" target="_blank"> <img class="sp-image" src="رابط الصورة"/></a>
            
            
        </div>
وهكذا يمكنك إضافة صورة 8 و 9... عبر تكرار الكود بعد </div> الكود السابق
16 Blogger تعليقات
Disqus
16 التعليقات
المشرف
avatar

مفيش حل ادخليه فى نص الموضوع ؟

المشرف
avatar

مخصص للصور فقط أخي

المشرف
avatar

الله عليك سلايدر ما شفت زيه الله عليك شكرااااااا وألف شكرااا

المشرف
avatar

نورت بتعليقك المشبع بالحيوية أخي أحييك جدا

المشرف
avatar

ممكن ان اعملها في الموضوع يعني داخل الموضوع لصور ؟؟

المشرف
avatar

نعم يمكنك ضع الكود 3 داخل الموضوع بتبويب HTML

المشرف
avatar

شكراأأأأأ يا رائع دائماً مبدع ليس غريب عليك ^_^ استمر

المشرف
avatar

شكرآآا لك حبيبي
ممكن كيف ازيد سرعة التغير الصور

المشرف
avatar
المشرف
avatar

أهلًا حسام الحبوب، باركك الله ع السلايدر المتناسق
والشرح الجميل، لدي استفسار وحسب، ألا يمكن تغيير
أبعاد السلايدر؟ أحب أخليها شوية عريضة وأكثر طولًا :/

المشرف
avatar

أهلا بك أخي... السلايدر يتغير حجمه على حسب المكان، لكن التعديل على مقاسه سيخرب المظهر قد جربت فعلا

المشرف
avatar

الاضافةجميلة لكن فيها مشكل أن الصور تتغير بشكل عشوائي لو ممكن تقولي كيف أجعلها تتغير بشكل منتظم يعني كل 3 ثواني مثلا تتغير الصور ... شكرا

المشرف
avatar

وذلك هو المراد اخي في هذا السلايدر... سيكون هناك سلايدر يتغير يدويا وتلقائيا فلتبقى على اطلاع

المشرف
avatar

اخي السيدر شو لا يعمل لماذا

المشرف
avatar

اخي اريد عرض اكثر من واحد في الصفحة الرئيسية ساعدني؟؟

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة