سلايدر شو يعرض صورا بأناقة وبجودة عالية ما يميزه أنه يتناسب تلقائيا مع أي حجم والمكان الأفضل له هو بالسيدبار ويمكن استعماله بداخل المواضيع أيضا يصلح لكافة المجالات وبسهولة يمكنك نسخ صورة موضوعك ووضعها به مع رابط الموضوع لن تحتاج لتعديل مقاسها وبهذا وبدون تأخير سأدعكم مع المعاينة
شرح طريقة التركيب
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>

التخصيص
* كل الصور محددة باللون الأخضر تغير بخاصتك
* الهاشتاج # ضع بدله رابط الموضوع

<!-- Slide 7 -->
        <div class="sp-slide">
 <a href="رابط الموضوع" target="_blank"> <img class="sp-image" src="رابط الصورة"/></a>
            
            
        </div>