سلايدر احترافي لعرض الصور

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

سلايدر لعرض الصور

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

الأن بعد ان قمت بمعاينة السلايدر تابع معي طريقة تركيب هذه الأداة

1. إبحث عن  </body>  باستعمال ( Ctrl+f)  وضع الكود التالي فوقه :

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqOIMbF3wM6JYzfPp2kF8t2QSb9WEwR8el1q4pvGYGyMqxQvsMfkuJtVLCdvhzOOoBW_2RztwiYdUHweSKhQps5mYKsF1qUQEoUfo_iGXsgt_m4vxKsEjQ8bxOT8Ulm_aPeAZq_IEIvml/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYc-NXTprUHXPYA0wI_8oz61ll58_SW0fKIMDYxW3L8xiVmaRgwzsxKgSXZ1ImRwfh5NvJnIfnsMhEqgc4utity365kzNS8PtvIxxFfEw90pJBa-oFl3ccEuIcnpXMbWkPa2M11jGIEE/s1600/2014_rio_2_movie-1280x800.jpg"/></a>
           
            
        </div>

<!-- Slide 4 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuImVv9mpDbIdK3cc-s_zzWDaXePPBk8rbAYDG3KybysBoayt8t8guXKK1HyxfxyI-aJcPNnhxay8Di6fvhTWkGwjgDZ5F9HvkFerJRVP0ARqbKkONde0wuhippXT6u3U6QLjcxlUgMDA/s1600/nickwordc.jpg"/></a>
           
            
        </div>

<!-- Slide 5 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3AhEHbQpaSOTR0tQFxNFqUUrkIvCbxp2LCfozr9tWYh1Pzm96FbRjfyES_9E-EyTGw3XpDLHqofhgloD7l1ASrrgvO1W2csg6uYTPmTT8v8I1nTu9ilmiuqzyNzAQ_E5LzX5Ng-T5X0/s1600/work_03.png"/></a>
            
            
        </div>

<!-- Slide 6 -->
        <div class="sp-slide">
 <a href="#" target="_blank"> <img class="sp-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNUsiIJzD6-7e25CMPnK7X2JDHJDix66x6Hrlolcx5QTyOeqUHOmnSMAO5VMEuQurshig8L4xhC6DWNsAZ7nA6TBeNLtti-lqnITeao5tGV20t3lKjtUAu6HAHHv8xF1BJyGGVRraE8Wvm/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>

0تعليقات